Workspace Switcher

Installation

pnpm dlx shadcn@latest add @paneui/workspace-switcher

Usage

import { WorkspaceSwitcher } from "@/components/ui/workspace-switcher"

<WorkspaceSwitcher
  workspaces={[{ id: "acme", name: "Acme", plan: "Pro" }]}
  value={workspace}
  onValueChange={setWorkspace}
  onCreate={() => setCreating(true)}
/>

In a sidebar

Put it in SidebarHeader and pass collapsed={useSidebar().state === "collapsed"} so it shrinks to the mark in the icon rail.

API Reference

Built on the Menu primitive. Only the props this library adds or changes are listed; everything else passes through.

WorkspaceSwitcher

Also accepts every prop of Menu.Trigger.

workspaces*: { id: string; name: string; plan?: string; logo?: ReactNode }[]; Choices; logo defaults to the first letter on a primary tile.
value*: string; Current workspace id.
onValueChange*: (id: string) => void; Called on pick.
onCreate: () => void; Adds a "Create workspace" item.
collapsed= false: boolean; Mark only.

Prop	Type	Default	Description
workspaces*	{ id: string; name: string; plan?: string; logo?: ReactNode }[]	—	Choices; `logo` defaults to the first letter on a primary tile.
value*	string	—	Current workspace id.
onValueChange*	(id: string) => void	—	Called on pick.
onCreate	() => void	—	Adds a "Create workspace" item.
collapsed	boolean	false	Mark only.