# Dashboard — Page Template for React

> 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.

- Page: https://crucibleui.com/components/templates/dashboard
- Category: [templates](https://crucibleui.com/components/templates)
- Tier: pro (one-time purchase, see https://crucibleui.com/pricing)
- Engine: motion
- npm dependencies: motion

## Install

```bash
npx shadcn@latest add @crucible/dashboard
```

Pro install requires adding the token-bearing `@crucible` registry to components.json (issued at https://crucibleui.com/account after purchase).

Import from `@/components/crucible/dashboard`.

## Props (`DashboardTemplateProps`)

| 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: `Omit<React.ComponentPropsWithoutRef<"div">, "children">`.

## Usage example

```tsx
import { DashboardTemplate } from "@/components/crucible/dashboard";

export default function DashboardTemplateDemo() {
  return (
    <div className="relative isolate h-[600px] w-full overflow-hidden rounded-xl bg-neutral-950">
      <DashboardTemplate />
    </div>
  );
}
```

## Accessibility & performance

Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through.