Patterns
Admin toolbar
A 52px top bar with a right-hand organization overlay, utilities, and account menu.
Interactive local example · fictional data
The Code tab contains this preview’s complete source, including sample data and interaction state. Load the package stylesheet and Switzer font as described in the installation guide. Additional layout utilities require Tailwind CSS in your application.
API reference
| Prop | Type | Default |
|---|---|---|
| workspace / userName | string | required |
| workspaces | (string | Organization)[] | [] |
| workspaceId | string | — |
| onOrganizationChange | (organization) => void | — |
| onManageWorkspaces | () => void | — |
| onWorkspaceChange | (workspace) => void | — |
| onNotifications / onSettings | () => void | — |
| userActions | { label, onSelect }[] | [] |
Primitives also accept their underlying HTML or Radix props. Full types are included with the package.
Behavior & accessibility
- Organization selection opens a full-height right overlay: 400px on desktop and full width below 640px. The account menu remains a dropdown.
- Search filters locally. onManageWorkspaces supplies the Manage action. Changes are controlled by the consumer.
- The organization overlay is available in 0.1.1 and later; 0.1.0 used a dropdown.
Reference
Admin shell