Menus & Navigation

Workspace Switcher

Compact workspace/org switcher for app chrome.

Import

tsx

import { WorkspaceSwitcher } from "@cronus-ui/ui";

bash

npx cronus-ui add workspace-switcher

Examples

Basic

A compact workspace switcher. The trigger shows the current avatar, name, and chevron; picking another row calls `onValueChange` with that workspace id.

tsx

function WorkspaceSwitcherDemo() {
  const [workspaceId, setWorkspaceId] = useState("cronus");
  const workspaces = [
    { id: "cronus", name: "Cronus", initials: "CR" },
    { id: "northwind", name: "Northwind", initials: "NW" },
    { id: "acme", name: "Acme", initials: "AC" },
  ];

  return (
    <div className="w-56">
      <WorkspaceSwitcher
        workspaces={workspaces}
        value={workspaceId}
        onValueChange={setWorkspaceId}
      />
    </div>
  );
}

In a sidebar

Drop the switcher under a brand row in `SidebarHeader`. The trigger stretches to the sidebar width.

tsx

<SidebarProvider>
  <Sidebar collapsible="none">
    <SidebarHeader>
      <span className="px-2 text-sm font-semibold text-fg">Cronus</span>
      <WorkspaceSwitcher
        workspaces={[
          { id: "cronus", name: "Cronus", initials: "CR" },
          { id: "northwind", name: "Northwind", initials: "NW" },
          { id: "acme", name: "Acme", initials: "AC" },
        ]}
        defaultValue="cronus"
      />
    </SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton isActive>
                <Home />
                <span>Home</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
</SidebarProvider>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component WorkspaceSwitcherDefault layout:inline style:workspace-switcher {
  aria-label:"Switch workspace"
  label "Switch workspace"
  text "Cronus"
  text "Northwind"
}

page "/audit/workspace-switcher/default" type:custom {
  use WorkspaceSwitcherDefault
}

API Reference

Generated from the component's exported types.

WorkspaceSwitcherLabels

Prop	Type	Default	Description
`label`	`string`	`"Switch workspace"`	Accessible name for the trigger.

WorkspaceSwitcherProps

Prop	Type	Default	Description
`workspaces`*	`readonly WorkspaceItem[]`	—	—
`value`	`string`	—	Controlled selected workspace id. Pair with `onValueChange`.
`defaultValue`	`string`	—	Uncontrolled initial workspace id. Defaults to the first workspace.
`onValueChange`	`(id: string) => void`	—	Called with the selected workspace id.
`labels`	`WorkspaceSwitcherLabels`	—	Override any subset of the built-in English strings.
`className`	`string`	—	Additional class names merged onto the root.
`ref`	`Ref<HTMLButtonElement>`	—	Forwarded to the trigger button.