Switchboard
A dark, dense SaaS dashboard shell: collapsible icon-rail sidebar, topbar with search, notifications, and user chip, spotlight stat cards with odometer count-ups, a pure-CSS bar-chart panel with sliding range tabs, a recent-activity feed, and a services table — every region rebrandable through props.
motionpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/switchboardManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Relay" | Brand name in the sidebar wordmark. |
| logo | React.ReactNode | the Relay relay-switch monogram | Logo mark (24×24, ideally currentColor). |
| accent | string | "#67e8f9" | Signature accent color (active nav, badges, chart bars, live dot). |
| navItems | SwitchboardNavItem[] | the six Relay items | Sidebar nav items. |
| stats | SwitchboardStat[] | the four Relay stats | Stat cards (animated count-ups). |
| chartTitle | string | "Event volume" | Chart panel title. |
| chartSubtitle | string | Chart panel subtitle. | |
| chartRanges | SwitchboardChartRange[] | Relay 24h/7d/30d | Chart range tabs + their bar data. |
| activity | SwitchboardActivityItem[] | the six Relay entries | Recent-activity feed entries. |
| services | SwitchboardServiceRow[] | the five Relay services | Services table rows. |
| user | SwitchboardUser | Imani Okafor | Topbar user chip. |
| notificationCount | number | 3 | Unread count on the notifications bell. |
| pageTitle | string | "Overview" | Main heading. |
| statusText | string | "Live — all regions reporting" | Live-status line next to the heading. |
| searchPlaceholder | string | "Search incidents, services, runbooks…" | Search input placeholder. |
| defaultCollapsed | boolean | false | Start with the sidebar collapsed to icon rail. |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"div">, "children"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.