Dashboard
A dense, dark admin/analytics shell for a commerce back office: a collapsible sectioned icon-rail sidebar, a topbar with search, notifications, and user chip, a row of KPI stat cards with odometer count-ups, trend chips, and mini sparklines, a large seeded SVG area chart, a revenue-by-channel bar list, a recent-orders table, and an interactive tasks checklist — every string, series, and row 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/dashboardManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Ledgerline" | Brand name in the sidebar wordmark. |
| logo | React.ReactNode | the Ledgerline monogram | Logo mark (24×24, ideally currentColor). |
| accent | string | "#a5b4fc" | Signature accent color (active nav, chart, deltas, focus). |
| navSections | DashboardNavSection[] | the Ledgerline groups | Sidebar nav, grouped into labelled sections. |
| stats | DashboardStat[] | the four Ledgerline stats | KPI stat cards (animated count-ups + sparklines). |
| chartTitle | string | "Net revenue" | Main chart panel title. |
| chartSubtitle | string | Main chart panel subtitle. | |
| chartSeries | number[] | a seeded 30-point Ledgerline curve | Series for the area chart, 0–100, oldest → newest. Rendered as a seeded smooth SVG area. |
| chartTicks | string[] | month abbreviations | X-axis tick labels laid out evenly under the chart. |
| chartHeadline | string | Headline value shown above the chart, e.g. "$284,910". | |
| chartDelta | string | Delta chip next to the headline, e.g. "+18.2% vs last quarter". | |
| chartTrend | "positive" | "negative" | "neutral" | "positive" | Colors the chart delta chip. |
| channelTitle | string | "Revenue by channel" | Secondary "channels / sources" bar-list title. |
| channels | DashboardChannel[] | the five Ledgerline channels | Bar-list rows. |
| ordersTitle | string | "Recent orders" | Orders table title. |
| orders | DashboardOrderRow[] | the five Ledgerline orders | Orders table rows. |
| tasksTitle | string | "Today's tasks" | Tasks card title. |
| tasks | DashboardTask[] | the four Ledgerline tasks | Tasks card rows. |
| user | DashboardUser | Dela Amevor | Topbar user chip. |
| notificationCount | number | 5 | Unread count on the notifications bell. |
| pageTitle | string | "Dashboard" | Main heading. |
| pageSubtitle | string | a dated greeting | Sub-line under the heading. |
| searchPlaceholder | string | "Search orders, customers, reports…" | Search input placeholder. |
| defaultCollapsed | boolean | false | Start with the sidebar collapsed to the 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.