# Workspace switcher (goodtabs UI)

A menu for moving between workspaces, with avatars, a check and a create item.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/workspace-switcher.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/workspace-switcher`

## Usage

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

<WorkspaceSwitcher
  workspaces={[{ id: "goodtabs", name: "goodtabs", plan: "Pro" }]}
  value={workspace}
  onValueChange={setWorkspace}
  onCreate={() => router.push("/new")}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| workspaces | `{ id: string; name: string; image?: string; plan?: string }[]` |  | Every workspace the person can switch to, in list order. |
| value | `string` |  | Id of the current workspace. Omit to run uncontrolled. |
| defaultValue | `string` | `workspaces[0].id` | First value when uncontrolled. |
| onValueChange | `(value: string) => void` |  | Called with the id of the chosen workspace. |
| onCreate | `() => void` |  | Adds a Create workspace item after a separator. |
| size | `"sm" | "default"` | `"default"` | Trigger height: 28px or 32px. |
| variant | `"outline" | "ghost"` | `"outline"` | Look of the trigger. |

## When to use

- At the top of an app sidebar, where the current team or account should always be visible
- In a header toolbar of a multi-tenant app
- When people belong to a handful of workspaces and create new ones now and then

## When not to use

- For a single workspace; show the name as text
- For dozens of workspaces; build a searchable combobox on Command
- For a user account menu with sign out and settings; that is a different menu

## Notes for agents

- A demo or parent that passes onValueChange or onCreate must be a client component
- Controlled with value and onValueChange, or uncontrolled with defaultValue; it falls back to the first workspace
- Pass className w-full and variant ghost for a sidebar header; the name truncates and the chevrons stay right
- Avatars are rounded-sm squares with initials; pass image for a logo

Docs: https://ui.goodtabs.co/components/workspace-switcher