4a:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4b:T2421,--- name: dashboardcn description: Build dashboards and analytics UI in React with dashboardcn, a shadcn/ui registry of KPI cards, trend, bar, donut, radar, scatter, sankey, and composed charts, funnels, ranked lists, gauges, activity rings, heatmaps, data tables, and composed cards. Use when asked for a dashboard, analytics page, metrics, KPI tiles, charts, or data tables in a project that uses shadcn/ui and Tailwind. --- # dashboardcn Dashboard components for shadcn/ui, distributed as a shadcn registry. Nothing is published to npm. Each item is copied into the project with the shadcn CLI, so the code is the user's to edit. Docs: https://dashboardcn.com. Every docs page is also Markdown: append `.md` to its URL. The index is https://dashboardcn.com/llms.txt. ## Where files land | Registry type | Lands in | Examples | | --- | --- | --- | | Component (primitive) | `components/ui/.tsx` | `kpi-card`, `trend-chart`, `data-table` | | Block (composed card) | `components/.tsx` | `kpi-row-card`, `data-table-card` | | Lib | `lib/format.ts` | `formatNumber`, `formatDelta`, `computeDelta` | Blocks pull in the primitives they are built from, plus the shadcn/ui items they need (`card`, `tabs`, `tooltip`, `table`, ...) and npm dependencies (`recharts`, `@tanstack/react-table`, `lucide-react`). ## Workflow 1. **Check the project is a shadcn/ui project.** It needs a `components.json`. If missing, run `npx shadcn@latest init` first. 2. **Pick items from the catalog below.** Prefer a block when its layout matches the request. Drop to primitives when composing something custom. 3. **Install everything in one command.** ```bash npx shadcn@latest add https://dashboardcn.com/r/kpi-row-card.json https://dashboardcn.com/r/trend-chart.json ``` Or register the namespace once in `components.json` and use short names: ```json { "registries": { "@dashboardcn": "https://dashboardcn.com/r/{name}.json" } } ``` ```bash npx shadcn@latest add @dashboardcn/kpi-row-card @dashboardcn/trend-chart ``` 4. **Read the docs for anything unfamiliar.** `references/api.md` in this skill summarizes every prop. The full page with examples and source is at `https://dashboardcn.com/docs/components/.md` or `https://dashboardcn.com/docs/blocks/.md`. 5. **Compose the page.** When a prop is missing, edit the installed file rather than wrapping it. That is the point of the registry model. ## Catalog | Need | Reach for | | --- | --- | | One headline number with a delta | `kpi-card`; `metric-value` for the number alone | | A row of numbers in one card | `kpi-row-card` (sparklines), `ring-kpi-card` (rings), `tick-kpi-card` (progress out of a whole), `metric-list` (compact rows) | | Trend over time | `trend-chart` (area, line, bar, stacked, horizontal); `sparkline` inline | | Current vs previous period, switchable metrics | `metric-tabs-chart-card` | | A balance or price with a chart | `balance-chart-card` | | Bars with one period highlighted, range switcher | `period-bar-chart-card`; `bar-chart` alone | | Mixed series, dual axes, reference lines | `composed-chart` | | Part of a whole | `donut-chart`, `distribution-bar`; as cards: `distribution-card`, `breakdown-card`, `allocation-card` | | Two metrics side by side with meters | `dual-metric-card` | | Conversion steps and drop-off | `funnel-chart` (bars, or `variant="flow"` for tapering stages); as cards: `funnel-chart-card` (flow), `stage-bars-card` (list of pills) | | Ranked list (top pages, referrers) | `bar-list` | | Progress toward a goal or capacity | `tick-bar`, `progress-card`, `radial-gauge`, `status-gauge-card`, `segmented-meter` (zones), `score-gauge-card` (score with a breakdown), `goal-chart-card` (daily bars against a goal line) | | Several goals at once | `activity-rings`; as a card: `activity-rings-card` | | Distribution or histogram | `dot-plot`, `dot-plot-card` | | Daily activity calendar | `activity-heatmap`; as a card with stats: `contributions-card` | | Two-axis density (weekday × hour, region × month) | `heatmap-chart`; as a card: `heatmap-chart-card` | | Multi-axis comparison or scores | `radar-chart` | | Correlation, bubbles | `scatter-chart` | | Flows between categories | `sankey-chart` | | Tabular data (sort, filter, paginate, select) | `data-table`; in a card: `data-table-card` | | Audit log, activity feed, version history | `timeline` | | A hero number with a takeaway sentence | `insight-card` | | Week/month/year switcher | `period-tabs` | | Signed percentage change | `delta-badge` | ## Data conventions - **Deltas are fractions.** `delta={0.124}` renders `+12.4%`. Exceptions: `distribution-card` and `dot-plot-card` take an absolute delta in the same unit as the value. Use `computeDelta(current, previous)` from `lib/format`. - **Down can be good.** Set `invertDelta` (or `invert` on `delta-badge`) for churn, latency, errors, spend, so a decrease is colored positive. - **`format`** is `"number" | "compact" | "currency" | "percent"`. Percent values are fractions: `value={0.46}` with `format="percent"` shows `46%`. `currency` is an ISO 4217 code, default USD. Large numbers abbreviate to `$158K` automatically via `metric-value`, with the full value in a tooltip. - **Trend arrays** (`trend`, `sparkline` `data`) are plain `number[]`, oldest first. - **Chart data** is an array of row objects. `xKey` names the x value and each series `key` names a numeric field in the row: ```ts const data = [ { date: "2026-08-01", desktop: 186, mobile: 80 }, { date: "2026-08-02", desktop: 305, mobile: 200 }, ] ``` - **Colors** accept any CSS color. Defaults cycle through the shadcn theme tokens `chart-1` to `chart-5`. Prefer tokens: `"var(--chart-2)"` or a Tailwind palette variable like `"var(--color-emerald-500)"`. - **Period and option switchers** on blocks are optional. Omit `periods` or `options` to hide them. They work uncontrolled (`defaultPeriod`) or controlled (`period` + `onPeriodChange`). ## Layout Cards extend shadcn `Card`, so `className` works for spans and heights. Charts default to `h-64 w-full`; override with `className` (`h-48`, `h-80`). A typical page: ```tsx export default function Page() { return (

) } ``` Use `lg:col-span-2` for charts and tables, single columns for KPI cards and gauges, and full width for data tables. Keep one grid per page section. ## Client and server Components with state or recharts already declare `"use client"`, so a Server Component page can render them directly and pass data as props. The page itself needs `"use client"` only when it owns state, such as a controlled period switcher or `data-table-card` with a `toolbar` that uses `useState`. Define `data-table` columns in a client module when cells render interactive elements. ## Data table essentials ```tsx const helper = createDataTableColumnHelper() const columns = helper.columns([ helper.accessor("name", { header: ({ column }) => , }), helper.accessor("revenue", { header: ({ column }) => , cell: ({ row }) =>

{formatNumber(row.original.revenue, { format: "currency" })}

, }), ]) ``` `enableRowSelection` adds checkboxes (pass `getRowId` for stable ids), `pinnedColumns` needs a `size` on each pinned column, `reorderable` allows drag reordering, `loading` swaps rows for a skeleton, `pending` dims them. For a custom layout use `useDataTable` and lay out `DataTableToolbar`, `DataTableSearch`, `DataTableViewOptions`, `DataTableContent`, and `DataTablePagination` yourself. ## Pitfalls - Do not `npm install dashboardcn`. It does not exist; use the shadcn CLI. - Do not pass percentages as whole numbers. `delta={12.4}` renders `+1240%`. - Do not wrap a registry component to add a prop. Edit the installed file. - A half donut needs both `sweep={180}` and `startAngle={180}`; `sweep` alone draws it rotated. - `activity-heatmap` and `contributions-card` dates are ISO `YYYY-MM-DD` strings. - `funnel-chart-card` and `stage-bars-card` take either `steps`/`stages` plus a `caption`, or `ranges` where every range carries its own steps and delta. - Foundations are Tailwind v4 and the shadcn theme variables. Projects on Tailwind v3 need the v4 upgrade first. 4c:T427b,# dashboardcn API reference Prop summaries for every registry item. `?` marks optional props. Every component also accepts the props of its root element (`div`, shadcn `Card`, or shadcn `ChartContainer`), including `className`. Full docs with examples and source: `https://dashboardcn.com/docs/components/.md` or `https://dashboardcn.com/docs/blocks/.md`. Shared types: - `NumberFormat = "number" | "compact" | "currency" | "percent"` - `PeriodOption = { value: string; label: string }` - Colors are any CSS color string. Defaults cycle `chart-1` to `chart-5`. ## lib/format ```ts formatNumber(value: number, { format?, currency? = "USD", locale? = "en-US", maximumFractionDigits?, compact? }): string // formatNumber(1234567) -> "1,234,567"; { format: "compact" } -> "1.2M" // { format: "currency", compact: true } on 158143 -> "$158K"; { format: "percent" } on 0.124 -> "12.4%" formatDelta(delta: number, locale?): string // 0.124 -> "+12.4%", -0.03 -> "-3.0%" computeDelta(current: number, previous: number): number // fractional; 0 when previous is 0 ``` ## Components (`@/components/ui/`) ### kpi-card — `KpiCard` `label: string`, `value: number | string`, `delta?: number` (fraction), `deltaLabel?: string`, `trend?: number[]`, `format?: NumberFormat`, `currency?: string`, `invertDelta?: boolean`, `icon?: ReactNode`, `children?: ReactNode`. Extends `Card`. ### metric-value — `MetricValue` `value: number | string`, `format?`, `currency?`, `maximumFractionDigits?: number`, `compactFrom?: number` (default 100000; `Infinity` never abbreviates), `suffix?: ReactNode`. Renders a `span`; abbreviated values get the full value in a tooltip. ### delta-badge — `DeltaBadge`, `getDeltaDirection(delta)` `delta: number` (fraction), `invert?: boolean`, `variant?: "outline" | "soft" | "text"`, `showIcon?: boolean`. ### sparkline — `Sparkline` `data: number[]` (oldest first), `variant?: "area" | "line"`, `fill?: "gradient" | "dots"`, `color?`, `curve?: "monotone" | "linear" | "step"`, `strokeWidth?: number`. Size it with `className`, e.g. `h-8 w-24`. ### metric-list — `MetricList` `items: MetricListItem[]` where item is `{ label, value: number | string, delta?, trend?: number[], format?, currency?, invertDelta?, icon?, key? }`; `variant?: "area" | "line"`, `fill?: "gradient" | "dots"`, `showDivider?: boolean`. ### trend-chart — `TrendChart` `data: Record[]`, `xKey: string`, `series: { key, label, color? }[]`, `type?: "area" | "line" | "bar"`, `fill?: "gradient" | "dots"`, `layout?: "vertical" | "horizontal"` (bars), `barRadius?: number | "full"`, `barSize?: number`, `stacked?: boolean`, `showLegend?`, `legendPosition?: "top" | "bottom"`, `legendAlign?: "left" | "center" | "right"`, `showGrid?`, `showYAxis?`, `yDomain?` (recharts domain, default `[0, "auto"]`), `xFormatter?: (value) => string`, `yFormatter?: (value: number) => string`. Default size `h-64 w-full`. ### bar-chart — `BarChart` `data: Record[]`, `xKey`, `yKey`, `groupKey?` (coarser label, one tick per group), `variant?: "gradient" | "striped" | "solid"`, `color?`, `mutedColor?`, `highlight?: (row, index) => boolean`, `grid?: "dashed" | "solid" | "none"`, `showYAxis?`, `showTooltip?`, `showActiveMarker?`, `barRadius?: number`, `xFormatter?`, `yFormatter?`, `tooltipLabel?: (row, index) => ReactNode`, `onBarClick?: (row, index) => void`, `referenceLines?: { y, label?, color?, dashed? }[]`. ### composed-chart — `ComposedChart` `data`, `xKey`, `series: ComposedSeries[]` where series is `{ key, label, type?: "area" | "line" | "bar", color?, axis?: "left" | "right", stackId?, pattern?: "solid" | "hatched" (bars), dashed?, curve?, dots?, highlightMax? }`; `referenceLines?: { y?, x?, label?, color?, dashed?, axis? }[]`, `showGrid?`, `showYAxis?`, `showLegend?`, `showTooltip?`, `xFormatter?`, `yFormatter?`, `rightYFormatter?`, `barRadius?`, `yDomain?: "zero" | "auto" | [number, number]`. ### donut-chart — `DonutChart` `data: { name, value, color? }[]`, `innerRadius?: number` (fraction of outer; 0 is a pie), `centerLabel?: ReactNode`, `centerValue?: ReactNode` (default total), `valueFormatter?`, `showLegend?`, `showTooltip?`, `startAngle?: number`, `sweep?: number` (180 for half), `paddingAngle?: number`. ### distribution-bar — `DistributionBar` `segments: { name, value, color? }[]`, `valueFormatter?`, `showLegend?`, `showValues?`. ### funnel-chart — `FunnelChart` `steps: { name, value, color? }[]`, `valueFormatter?`, `color?`, `showDropoff?: boolean` (bars), `variant?: "bars" | "flow"`, and for flow: `shape?: "eased" | "sharp"`, `height?: number` (px, default 160), `neckWidth?: number`, `showPercentages?`, `showLabels?` (tile per stage), `activeIndex?: number | null`, `onActiveIndexChange?`. ### bar-list — `BarList` `data: { name, value, href?, icon?, key? }[]`, `valueFormatter?`, `sortOrder?: "descending" | "ascending" | "none"`, `color?`, `showPercentage?`, `onItemClick?: (item) => void`. ### tick-bar — `TickBar` `value: number`, `max?: number` (default 100), `segments?: number`, `color?`, `trackColor?`, `shape?: "tick" | "pill"`. ### radial-gauge — `RadialGauge` `value: number`, `min?`, `max?`, `size?: number` (px diameter), `thickness?: number`, `segments?: number` (0 is continuous), `gap?: number` (degrees), `startAngle?`, `sweep?` (180 semicircle, 360 ring), `color?`, `trackColor?`, `children?` rendered in the middle. ### segmented-meter — `SegmentedMeter` `value: number`, `zones: { label?, from, to, color? }[]`, `highlightActive?`, `showTicks?`, `showLabels?`, `showMarker?`, `tickFormatter?`. ### dot-plot — `DotPlot` `data: number[]` (one per column), `labels?: string[]`, `max?`, `rows?: number`, `color?`, `emphasis?: number` (fraction of max at which columns draw at full strength; 0 for all), `fadedOpacity?`, `showTooltip?`, `valueFormatter?`, `activeIndex?: number | null`, `onActiveIndexChange?`. Dot size via `className="[--dot-size:0.875rem]"`. ### activity-heatmap — `ActivityHeatmap` `data: { date: "YYYY-MM-DD", value }[]`, `endDate?: Date`, `weeks?: number`, `startDate?: Date`, `color?`, `colors?: string[]` (explicit levels), `scale?: "linear" | "sqrt"`, `cellSize?`, `gap?`, `valueFormatter?`, `unit?: string`, `showMonthLabels?`, `weekdayLabels?: "mwf" | "all" | "none"`, `showLegend?`, `scrollToEnd?`, `renderTooltip?`, `onCellClick?`. ### activity-rings — `ActivityRings` `rings: { label, value, max? (default 100), color? }[]` (outermost first), `size?: number` (px), `thickness?`, `gap?`, `trackOpacity?`, `activeIndex?: number | null`, `onActiveIndexChange?`, `children?` rendered in the middle. ### heatmap-chart — `HeatmapChart` `rows: { label, values: number[] }[]`, `columns: string[]`, `color?`, `max?` (value drawn fully saturated), `scale?: "linear" | "sqrt"`, `levels?: number` (quantize the ramp), `gap?` (px; cells are fluid), `valueFormatter?`, `unit?: string`, `showLegend?`, `showRowLabels?`, `showColumnLabels?`, `columnLabelEvery?: number`, `renderTooltip?: (datum: { row, column, rowLabel, columnLabel, value }) => ReactNode`, `onCellClick?`, `activeCell?: { row, column } | null`, `onActiveCellChange?`. ### radar-chart — `RadarChart` `data: Record[]`, `angleKey: string`, `series: { key, label, color? }[]`, `variant?: "filled" | "line" | "dots"`, `grid?: "polygon" | "circle" | "none"`, `showAngleLabels?`, `showRadiusAxis?`, `showLegend?`, `showTooltip?`, `domain?` (recharts domain, default `[0, "auto"]`), `valueFormatter?: (value: number) => string`. Default size `h-64 w-full`. ### scatter-chart — `ScatterChart` `series: { key?, label, data: Record[], color? }[]`, `xKey`, `yKey`, `sizeKey?` (bubbles), `nameKey?` (tooltip title per point), `xLabel?`, `yLabel?`, `sizeLabel?`, `showGrid?`, `showXAxis?`, `showYAxis?`, `showLegend?`, `showTooltip?`, `xFormatter?`, `yFormatter?`, `sizeFormatter?`, `dotRadius?: number`, `sizeRange?: [number, number]` (bubble area, default `[40, 400]`), `xDomain?`, `yDomain?`. Default size `h-64 w-full`. ### sankey-chart — `SankeyChart` `nodes: { name, color? }[]`, `links: { source: number | string, target: number | string, value }[]` (names or indexes), `valueFormatter?`, `showShares?` (default true, appends "· 22%" of total flow), `showTooltip?`, `nodeWidth?` (12), `nodePadding?` (16), `linkOpacity?` (0.25, doubles on hover), `labelPosition?: "outside" | "inside"`, `colors?: string[]` (palette for source nodes; targets inherit their largest incoming link's color). Default size `h-72 w-full`. ### period-tabs — `PeriodTabs` Extends shadcn `Tabs` (`value`, `defaultValue`, `onValueChange`). `options?: PeriodOption[]` (default week/month/year), `size?: "sm" | "default"`, `animated?: boolean`. ### timeline — `Timeline`, `TimelineItem`, `TimelineRail`, `TimelineMarker`, `TimelineConnector`, `TimelineContent`, `TimelineHeader`, `TimelineTitle`, `TimelineTime`, `TimelineDescription` Compositional. `TimelineItem` takes `status?: "default" | "current" | "done"`. Put a `TimelineRail` (marker + connector) and a `TimelineContent` inside each item. ### data-table — `DataTable`, `useDataTable`, `createDataTableColumnHelper`, `createSelectionColumn`, `DataTableColumnHeader`, `DataTableToolbar`, `DataTableSearch`, `DataTableViewOptions`, `DataTableContent`, `DataTablePagination`, `DataTableSelectionBar`, `DataTableSkeleton` `useDataTable({ columns, data, pageSize? (0 for one page), initialSorting?, initialColumnVisibility?, pinnedColumns?, enableRowSelection?, getRowId?, onRowSelectionChange? })`. `DataTable` takes those options plus `searchKey?`, `searchPlaceholder?`, `toolbar?: ReactNode`, `showViewOptions?`, `showPagination?`, `pageSizeOptions?: number[]`, `emptyMessage?`, `loading?`, `pending?`, `skeletonRows?`, `stickyHeader?`, `maxHeight?: number | string`, `reorderable?: boolean | string[]`, `density?: "compact" | "default" | "relaxed"`, `onRowClick?`, `rowClassName?`, `rowProps?`, `renderRow?`, `selectionActions?: ReactNode`. `DataTableColumnHeader` takes `column`, `title`, `align?: "left" | "right"`. ## Blocks (`@/components/`) ### kpi-row-card — `KpiRowCard` `title`, `description?`, `metrics: { label, value, delta?, note?, trend?, format?, currency?, invertDelta?, icon? }[]`, `periods?: PeriodOption[]`, `period?`, `defaultPeriod?`, `onPeriodChange?`, `footer?: ReactNode`, `action?: { label, href }`. ### ring-kpi-card — `RingKpiCard` `metrics: { label, value: number, previous?, progress? (0-100), max?, format?, currency?, unit?, invertDelta?, action? }[]`. ### tick-kpi-card — `TickKpiCard` `metrics: { label, value: number, max: number, format?, currency?, unit?, color?, icon?, action? }[]`, `segments?`. ### metric-tabs-chart-card — `MetricTabsChartCard` `metrics: { key, label, compareKey?, value?, delta?, aggregate?: "sum" | "average" | "last", format?, currency?, fractionDigits?, invertDelta? }[]`, `data`, `xKey`, `selected?`, `defaultSelected?`, `onSelectedChange?`, `color?`, `compareColor?`, `compareLabel?`, `xFormatter?`, `chartClassName?`. ### balance-chart-card — `BalanceChartCard` `title`, `value: number`, `delta?`, `deltaLabel?`, `format?`, `currency?`, `stats?: { label, value, delta?, format?, color? }[]`, `data`, `xKey`, `yKey`, `seriesLabel?`, `referenceValue?`, `referenceLabel?`, `highlightMax?`, `chartClassName?`. ### period-bar-chart-card — `PeriodBarChartCard` `title`, `data`, `xKey`, `yKey`, `groupKey?`, `ranges?: { value, label, points }[]`, `defaultRange?`, `selected?`, `defaultSelected?`, `onSelectedChange?`, `valueLabel?`, `format?`, `currency?`, `variant?`, `color?`, `mutedColor?`, `grid?`, `xFormatter?`, `tooltipLabel?`, `chartClassName?`. ### distribution-card — `DistributionCard` `title`, `items: { name, value, icon?, color? }[]`, `total?`, `delta?` (absolute, same unit), `format?`, `currency?`, `valueLabel?`, `options?: { value, label }[]`, `value?`, `defaultValue?`, `onValueChange?`. ### breakdown-card — `BreakdownCard` `title`, `action?: ReactNode`, `items: { name, value, color? }[]`, `total?`, `delta?` (fraction), `invertDelta?`, `format?`, `currency?`, `max?`, `pattern?: "hatched" | "solid"`. ### allocation-card — `AllocationCard` `title`, `description?`, `value: number` (share, e.g. 0.46), `format?`, `currency?`, `progress?` (0-100), `delta?`, `deltaLabel?`, `invertDelta?`, `color?`, `segments?`, `periods?`, `period?`, `defaultPeriod?`, `onPeriodChange?`, `stat?: { label, value }`, `people?: { name, src? }[]`, `peopleLabel?`. ### dual-metric-card — `DualMetricCard` `title`, `metrics: { label, value: number, format?, currency?, progress?, showShare?, meter?: "ticks" | "bar", color?, detail?: { label, value, description? } }[]`, `options?`, `value?`, `defaultValue?`, `onValueChange?`, `segments?`. ### dot-plot-card — `DotPlotCard` `title`, `value`, `format?`, `currency?`, `data: number[]`, `labels?: string[]`, `peakLabel?`, `delta?` (absolute), `deltaLabel?`, `deltaFormat?`, `color?`, `rows?`, `valueFormatter?`, `action?`. ### progress-card — `ProgressCard` `title`, `icon?`, `action?`, `value: number`, `max: number`, `label?` (noun after the count), `detail?: ReactNode`, `color?`, `segments?`, `shape?: "tick" | "pill"`. ### status-gauge-card — `StatusGaugeCard` `title`, `status: string`, `metricLabel: string`, `value`, `format?`, `currency?`, `progress?`, `color?`, `segments?`, `segmentGap?`, `thickness?`, `gaugeSize?`, `people?: { name, src? }[]`, `peopleLabel?`, `action?: { label, href?, onClick?, icon? }`. ### insight-card — `InsightCard` `badge?`, `icon?`, `action?`, `variant?: "aurora" | "sunset" | "ocean" | "graphite" | "plain"`, `items: { value, format?, currency?, headline, description? }[]`, `index?`, `defaultIndex?`, `onIndexChange?`, `interval?: number` (ms autoplay), `size?: "md" | "lg"`, `decoration?`. ### data-table-card — `DataTableCard` All `useDataTable` options plus `title`, `description?`, `action?`, `searchKey?`, `searchPlaceholder?`, `toolbar?`, `showViewOptions?`, `showPagination?`, `pageSizeOptions?`, `selectionActions?`, `footer?` (replaces pagination), and the `DataTableContent` display props (`loading`, `pending`, `stickyHeader`, `maxHeight`, `reorderable`, `density`, `emptyMessage`, `onRowClick`, `rowClassName`, `rowProps`, `renderRow`). ### activity-rings-card — `ActivityRingsCard` `title`, `caption?`, `metrics: { label, value, max?, color?, display?, format?, currency?, unit? }[]` (outermost ring first), `layout?: "stacked" | "side"`, `size?`, `thickness?`, `gap?`, `center?: ReactNode`, `action?: ReactNode`. ### funnel-chart-card — `FunnelChartCard` `title`, `steps?: { name, value, color? }[]`, `delta?` (fraction), `deltaLabel?`, `invertDelta?`, `caption?`, `ranges?: { value, label, steps, delta? }[]` (each range carries its own steps), `range?`, `defaultRange?`, `onRangeChange?`, `format?`, `currency?`, `color?`, `shape?`, `height?`, `neckWidth?`, `showPercentages?`, `showLabels?`, `chartClassName?`. Hovering a stage swaps the headline. ### stage-bars-card — `StageBarsCard` `title`, `stages?: { name, value, color?, icon? }[]`, `delta?` (fraction), `deltaLabel?`, `invertDelta?`, `caption?`, `ranges?: { value, label, stages, delta? }[]`, `range?`, `defaultRange?`, `onRangeChange?`, `format?`, `currency?`, `color?` (single ink), `showTiles?`, `showIcons?`. ### contributions-card — `ContributionsCard` `title`, `value?` (defaults to the sum of data), `format?`, `currency?`, `delta?`, `deltaLabel?`, `invertDelta?`, `stats?: { label, value: number | string, format?, currency?, unit? }[]`, `heatmapLabel?`, `periods?`, `period?`, `defaultPeriod?`, `onPeriodChange?`, `action?`, plus the `activity-heatmap` props `data`, `endDate?`, `weeks?`, `startDate?`, `color?`, `colors?`, `scale?`, `cellSize?`, `gap?`, `unit?`, `weekdayLabels?`, `showLegend?`, `valueFormatter?`, `onCellClick?`. ### heatmap-chart-card — `HeatmapChartCard` `title`, `rows`, `columns`, `value?` (defaults to the sum of all cells), `delta?`, `deltaLabel?`, `invertDelta?`, `format?`, `currency?`, `unit?`, `valueFormatter?`, `color?`, `max?`, `scale?`, `periods?: PeriodOption[]`, `period?`, `defaultPeriod?`, `onPeriodChange?`, `chartClassName?`. Hovering a cell swaps the headline to that cell's value. ### score-gauge-card — `ScoreGaugeCard` `title`, `status?`, `statuses?: { min, label }[]`, `caption?`, `score: number`, `max?`, `color?`, `gaugeSize?`, `thickness?`, `segments?`, `segmentGap?`, `sweep?` (default 360), `barSegments?` (0 = solid bar), `items: { label, detail?, value, max, color? }[]`, `action?: ReactNode`. ### goal-chart-card — `GoalChartCard` `title`, `value?` (defaults to sum of rows), `format?`, `currency?`, `unit?`, `caption?`, `data`, `xKey`, `yKey`, `goal: number`, `goalLabel?`, `color?`, `mutedColor?`, `variant?`, `grid?`, `xFormatter?`, `yFormatter?`, `chartClassName?`, `delta?`, `deltaLabel?`, `invertDelta?`, `periods?`, `period?`, `defaultPeriod?`, `onPeriodChange?`. 49:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4a",null,{"files":[{"path":"../../skills/dashboardcn/SKILL.md","content":"$4b","type":"registry:file","target":"~/.claude/skills/dashboardcn/SKILL.md"},{"path":"../../skills/dashboardcn/references/api.md","content":"$4c","type":"registry:file","target":"~/.claude/skills/dashboardcn/references/api.md"}],"className":"h-[70svh] min-h-80"}]]}]