A sidebar whose account card grows upward into a panel with a status switch, workspace picker, seat meter and sign out. The avatar ring takes the status color and the nav behind softly blurs.
Overview
Acme Robotics
npx shadcn@latest add https://hyperblur.dev/r/sidebar-account-card.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/sidebar-account-card.tsx.
import { SidebarAccountCard } from "@/components/hyperblur/sidebar-account-card"
<SidebarAccountCard user={{ name: "Maya Chen", email: "maya@acme.dev" }} onSignOut={() => signOut()} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id: string; label: string; icon?: SidebarAccountCardIconName | ReactNode; badge?: number }[] | Overview, Activity, Projects, Schedule, Messages | Navigation rows above the card. |
| active | string | Controlled current item id. Pair with onChange. | |
| defaultActive | string | first item | Initially current item when uncontrolled. |
| onChange | (id: string) => void | Called when a row is chosen. | |
| user | { name: string; email: string; initials?: string; color?: string } | Maya Chen | Person shown on the card. |
| status | "online" | "away" | "busy" | Controlled status. Pair with onStatusChange. | |
| defaultStatus | "online" | "away" | "busy" | "online" | Initial status when uncontrolled. |
| onStatusChange | (status) => void | Called when the status switch changes. | |
| accounts | { id: string; name: string; role?: string; color?: string }[] | Acme Robotics, Loop Health | Workspaces to switch between. An empty array hides the list. |
| account | string | Controlled workspace id. | |
| defaultAccount | string | first account | Initial workspace when uncontrolled. |
| onAccountChange | (id: string) => void | Called when a workspace is picked. | |
| seats | { used: number; total: number } | null | { used: 8, total: 10 } | Segmented seat meter. null hides it. |
| open | boolean | Controlled panel state. | |
| defaultOpen | boolean | false | Initial panel state when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called when the panel opens or closes. | |
| onSettings | () => void | Called by the Settings button. | |
| onSignOut | () => void | Called by the Sign out button. | |
| brand | string | "Acme" | Product name at the top. |
| accent | string | "#2f7bff" | Accent for badges, the seat meter, check marks and focus rings. |