Workspace switcher

A React block (a whole screen) in Beamline's Blocks category.

Moving between workspaces and making a new one: a switcher for the top of your sidebar (the current workspace's mark, name and plan; a searchable list with roles and unread counts; Create workspace) and a Choose a workspace page for after sign-in with waiting invitations to join or decline; both open the same three-step create dialog (name with its address checked as you type, a colour for its mark, teammates to invite) that ends in the new workspace.

Use it for

Any multi-tenant product where a person belongs to several workspaces, organisations or projects.
The page after sign-in when a person has more than one workspace, or invitations waiting.

Not for

The signed-in person's own menu (user-menu).
Choosing one value from a long list in a form (combobox).
Workspace settings (settings).

Anatomy

switcher trigger: the workspace's square mark (initials on its colour), name, plan; a chevron
switcher list: search, each workspace with its mark, name, plan, role and unread count, the current one marked; Create workspace at the end
choose page: title, each workspace as a row to open, invitations waiting (who invited, as what) with Join and Decline, Create workspace
create dialog step 1: name, and its address (written from the name, editable) checked as typed: checking, free, taken with a free suggestion
create dialog step 2: a colour for the mark, with the mark previewed
create dialog step 3: teammates to invite (optional), Create workspace

Variants

variant: menu, page

States

one workspace (the list still offers Create); many (search appears past six)
switching (the chosen row busy until your handler resolves)
invitation joining, joined (it joins the list), declined (it leaves)
address checking, free, taken (suggestion), invalid characters
creating (busy), created (the switcher shows it), failed (the dialog keeps every step and says why)
no workspaces yet (the page leads with Create workspace)

Keyboard

Trigger: Enter or Space opens the list with focus in its search; ↑/↓ move, Enter switches, Esc closes and returns focus
Create dialog: Enter moves to the next step when the step is valid; Back returns; focus starts in each step's first field

Motion

The list grows out of its trigger. The highlight glides between rows. The dialog's tray eases between steps; the mark preview changes colour as you pick. A joined invitation slides into the list; a declined one fades where it stood. Reduced motion places everything at once.

Props

Prop	Type	Default	Description
`variant`	`"menu" \| "page"`	—	The sidebar switcher (default) or the Choose a workspace page.
`workspaces` (required)	`Workspace[]`	—	id, name, slug, plan, role, members, hue, unread.
`current / defaultCurrent / onCurrentChange`	`string`	—	The workspace in use.
`onSwitch`	`(id) => Promise<void> \| void`	—	Open a workspace (your router); the row is busy until it resolves.
`invitations`	`{ id, workspace, invitedBy, role, hue? }[]`	—	Waiting invitations, on the page.
`onAccept / onDecline`	`(id) => Promise<Workspace> / (id) => Promise<void>`	—
`onCreate`	`(input: { name, slug, hue, invite }) => Promise<Workspace>`	—	Shows Create workspace.
`onCheckSlug`	`(slug) => Promise<{ free: boolean; suggestion?: string }>`	—	Checks the address as it is typed.
`domain`	`string`	—	Where workspace addresses live ("northline.app").
`className / classNames / style / ref`	`string / WorkspaceSwitcherClassNames / CSSProperties / Ref<HTMLDivElement>`	—

Built from

popover
command-menu
avatar
button
badge
dialog
input
tag-input
radio-group
spinner
toast
app-shell

Dependencies

lucide-react, motion

Import

import { WorkspaceSwitcher } from "@/blocks/workspace-switcher/workspace-switcher";

Get it

Workspace switcher is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent