WorkspaceSwitcher

WorkspaceSwitcher gives multi-tenant product shells a consistent place to show the current workspace and move between organizations or projects.

#Default usage

<WorkspaceSwitcher
  defaultValue="frogg"
  workspaces={[
    { id: "frogg", name: "FroggDesign", description: "Design system", plan: "Pro" },
    { id: "enter", name: "EnterUI", description: "Component docs", plan: "Team" },
    { id: "labs", name: "Frogg Labs", description: "Experiments", plan: "Free" },
  ]}
/>

#Import

import { WorkspaceSwitcher } from "@froggdesign/enter-ui-react";

#Controlled

<WorkspaceSwitcher
  value={workspaceId}
  onValueChange={setWorkspaceId}
  onCreateWorkspace={openCreateWorkspace}
  workspaces={workspaces}
/>

#Patterns

Use this in top bars, sidebars, and app shells for org, workspace, project, account, or environment switching. Keep descriptions short enough to scan in a menu.

#Accessibility

The trigger is a real button and the menu uses DropdownMenu keyboard behavior. The current workspace is represented in the trigger and active menu item styling.

#API

• workspaces: { id, name, description?, avatar?, plan? }[].
• value: controlled workspace id.
• defaultValue: initial workspace id.
• onValueChange: called with the selected workspace id.
• onCreateWorkspace: optional create action at the end of the menu.
• disabled: disables the trigger.

#Styling

WorkspaceSwitcher uses .eui-workspace-switcher classes and FroggDesign tokens for layout, state, focus, and disabled styling.

The current workspace has a blue-gray tinted row, contrasting avatar, and a checkmark. Hover uses a neutral surface so it remains distinct from selection. Compact rounded-square avatars and a small section label keep the menu easy to scan.