Workspace switcher
The sidebar workspace menu: the avatar and name crossfade on switch, the check slides to the selection, ⌘1–9 jump between workspaces, and "New workspace" expands inline.
Interactive preview · desktop · dark
Installation
Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.
Usage
Import it, pass your props, and make it part of your product.
example.tsx
import { WorkspaceSwitcher } from '@/components/component-kit/items/block-workspace-switcher';
export function Example() { return ( <WorkspaceSwitcher workspaces={[ { id: 'acme', name: 'Acme Inc', plan: 'Pro', members: 12, tone: 1 }, { id: 'labs', name: 'Northwind Labs', plan: 'Business', members: 38, tone: 2 }, ]} onChange={(workspace) => console.log(workspace.id)} /> );}Props
| Prop | Type | Default | Description |
|---|---|---|---|
workspaces | Workspace[] | 3 demo workspaces | Workspaces to list; each has id, name, plan, members and an optional tone (1–5) for the avatar tile. |
defaultWorkspaceId | string | first workspace | The initially selected workspace. |
onChange | (workspace: Workspace) => void | undefined | Called when a workspace is picked, including one just created. |
onCreate | (workspace: Workspace) => void | undefined | Called when the inline form creates a workspace. |
contentClassName | string | undefined | Class for the portalled menu. |
autoPlay | boolean | false | Cycle the selection every 2s after hydration; for inert previews. |