caliper uidocs
DemoSign inGet Pro

Workspace switcher

Pro

Moves between the workspaces you belong to and starts new ones: your role and plan in each, a filter once there are several, and a create form that checks the address while you type.

Installs components/ui/workspace-switcher.tsxDepends on @radix-ui/react-popover, @radix-ui/react-slot, lucide-reactMotion shared motion tokens
pnpm dlx shadcn@latest add @caliper/workspace-switcher

When to use #

Use it for

  • Products where one person belongs to several organisations, teams or clients.
  • The top of an app sidebar, where the workspace name sits.

Skip it when

  • Switching between projects inside one workspace; use a select or the sidebar.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/workspace-switcher

Adds its 5 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source. It is built from WorkspaceSwitcher and slugify.

example.tsx
import { WorkspaceSwitcher, slugify } from "@/components/ui/workspace-switcher"

The worked example comes with Pro

The 38-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

WorkspaceSwitcher

component
PropTypeDefaultDescription
workspaces *readonly WorkspaceOption[]—
value *string—
onValueChange *(id: string) => void—
onCreate((input: { name: string; slug: string; }) => string | void | Promise<string | void>)—Creates the workspace; resolve with its id to switch to it. Without it, there is no create option.
onManage(() => void)—Opens the current workspace's settings, from the bottom of the menu.
recentreadonly string[][]Workspace ids, most recent first; they lead the list.
checkSlug((slug: string) => Promise<SlugCheck>)—Whether an address is free. Without it every well-formed address is accepted.
addressPrefixstring"app.example.com/"Shown before the address, e.g. "app.example.com/".
classNamestring—

slugify

component

No props of its own; it accepts the native props of its root element.

Accessibility #

It exposes combobox, listbox, option, presentation and alert semantics, with aria-label, aria-hidden, aria-expanded, aria-controls, aria-autocomplete and aria-selected kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour
HomeJumps to the first item or the minimum.
EndJumps to the last item or the maximum.
EnterActivates the focused control.

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.