Workspace switcher

Pro

Switches between organizations and workspaces: searchable, grouped by organization, recent ones first, with create and settings actions. Sizes itself for the App shell sidebar, its collapsed rail and a top navigation.

npx prodular-ui add workspace-switcher

Part of Prodular UI Pro. Preview and read the docs freely, install with a license. See pricing

Organizations and recent

Seven workspaces in four organizations. Switching moves the previous one into Recent.

Search appears from six workspaces. Recent ones stay on top, the rest group by organization.

"use client"
import * as React from "react"
import { WorkspaceSwitcher, type Workspace } from "@/components/ui/workspace-switcher"
const workspaces: Workspace[] = [  { id: "halcyon", name: "Halcyon Labs", organization: "Halcyon", meta: "Scale plan, 42 members" },  { id: "halcyon-eu", name: "Halcyon Europe", organization: "Halcyon", meta: "Scale plan, 9 members" },  { id: "halcyon-sandbox", name: "Halcyon Sandbox", organization: "Halcyon", meta: "Test data" },  { id: "northgate", name: "Northgate Studio", organization: "Northgate", meta: "Growth plan, 6 members" },  { id: "northgate-clients", name: "Northgate Clients", organization: "Northgate", meta: "Growth plan, 3 members" },  { id: "kestrel", name: "Kestrel Health", organization: "Kestrel Health", meta: "Enterprise, 118 members" },  { id: "tidewater", name: "Tidewater Energy", organization: "Tidewater", meta: "Starter plan, 2 members" },]
export default function WorkspaceSwitcherOrganizations() {  const [active, setActive] = React.useState("halcyon")  const [recent, setRecent] = React.useState(["kestrel", "northgate"])  return (    <div className="flex w-64 flex-col gap-3">      <WorkspaceSwitcher        workspaces={workspaces}        value={active}        onValueChange={(id) => {          setRecent((r) => [active, ...r.filter((x) => x !== active && x !== id)])          setActive(id)        }}        recent={recent}        onSettings={() => {}}        onCreate={() => {}}      />      <p className="px-2 text-[13px] text-muted-foreground">        Search appears from six workspaces. Recent ones stay on top, the rest group by organization.      </p>    </div>  )}

Anatomy

<WorkspaceSwitcher  workspaces={workspaces}  value={workspaceId}  onValueChange={(id) => router.push(`/${id}/invoices`)}  recent={recentIds}  onCreate={openCreateDialog}/>

Guidance

Use it when

Apps where one person belongs to several workspaces, teams or client accounts.
In the brand slot of App shell, or at the start of a top bar.
meta for the plan, member count or region, so people pick the right one at a glance.

Avoid

Switching between projects inside one workspace. Use a Select or the page nav.
Hiding create behind the switcher when creating workspaces is rare. Keep onCreate for apps where it is common.

Rules for AI agents

Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.

Pass workspaces as { id, name, organization?, meta?, logo?, color? }[] and the active id as value.
Keep recent as the ids of the last workspaces used, newest first; the list shows three.
On onValueChange, switch the data scope and route to the same page in the new workspace, not to its home.
Without a logo the initial shows on a tint of a chart color; set color to a var(--chart-N) token for a fixed one.
The trigger has an accessible name with the active workspace. The list is a combobox: arrows move, Enter switches, typing searches.

API