# Workspace Picker Login Form

> Workspace picker login form for React and Tailwind CSS (shadcn/ui) that turns one email into a colorful list of the workspaces a person belongs to, Slack-style. It is built to get people into the right workspace with one email and one tap, instead of remembering a URL. Type an email, see a looking-up skeleton, then a staggered list of workspaces with gradient initial tiles, addresses, member counts, last-used hints, and sign-in method badges (SSO, passkey, or password). Pick one and it rises to the top with a FLIP transition while the matching continue button appears; a lone workspace is chosen automatically, and "Not you?" returns to the email step. Supports controlled email, status, workspaces, and selection, lookup and continue callbacks, keyboard navigation with arrow keys, listbox semantics with live announcements, reduced motion, and light and dark themes. Use it for multi-tenant SaaS sign-in, team switchers, and enterprise login pages. The included demo scripts a sample flow; the component makes no requests. Requires React and lucide-react, with no animation library.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Login Form, Authentication, Workspace, SaaS, Sign in
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@dhxwhy/components/workspace-picker-login

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/workspace-picker-login?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/login-form.md