# dashboardcn > Dashboard and analytics components for shadcn/ui. KPI cards, charts, funnels, tables, and the pieces around them. Installed with the shadcn CLI, so you own the code. Every item installs with the shadcn CLI: `npx shadcn@latest add https://dashboardcn.com/r/.json`. The code is copied into the project, so edit it rather than wrapping it. Blocks are cards composed from the component primitives. ## Docs - [Introduction](https://dashboardcn.com/docs.md): What dashboardcn is, why it exists, and what it is built on. - [Installation](https://dashboardcn.com/docs/installation.md): Prerequisites, install by URL, and the @dashboardcn registry namespace. ## Components - [Activity Heatmap](https://dashboardcn.com/docs/components/activity-heatmap.md): A calendar heatmap of daily activity, in the style of a contribution graph. - [Bar Chart](https://dashboardcn.com/docs/components/bar-chart.md): A single-series bar chart with gradient or striped fills, highlighted bars, and a hover marker. - [Bar List](https://dashboardcn.com/docs/components/bar-list.md): A ranked list with proportional bars, for top pages, referrers, or countries. - [Composed Chart](https://dashboardcn.com/docs/components/composed-chart.md): Mix areas, lines, and bars in one chart with dual axes, reference lines, peak markers, and hatched bars. - [Data Table](https://dashboardcn.com/docs/components/data-table.md): A sortable, filterable, paginated table with column visibility, row selection, sticky and reorderable columns, and loading states, built on TanStack Table v9. - [Delta Badge](https://dashboardcn.com/docs/components/delta-badge.md): A signed percentage change with a trend icon, colored by whether the change is good. - [Distribution Bar](https://dashboardcn.com/docs/components/distribution-bar.md): A single stacked bar showing how a total splits across categories. - [Donut Chart](https://dashboardcn.com/docs/components/donut-chart.md): A donut, pie, or half-donut with a center label, tooltip, and legend, on shadcn's chart primitives. - [Dot Plot](https://dashboardcn.com/docs/components/dot-plot.md): A distribution drawn as columns of stacked dots, with the peak columns at full strength. - [Funnel Chart](https://dashboardcn.com/docs/components/funnel-chart.md): Step-by-step conversion with drop-off between steps and overall conversion. - [KPI Card](https://dashboardcn.com/docs/components/kpi-card.md): A metric card with value, period-over-period delta, and an optional sparkline. - [Metric List](https://dashboardcn.com/docs/components/metric-list.md): Compact rows of label, sparkline, value, and delta. - [Metric Value](https://dashboardcn.com/docs/components/metric-value.md): A formatted number that abbreviates large values (e.g. $158K) and shows the full value in a tooltip on hover. Every card in this registry renders its numbers through it. - [Period Tabs](https://dashboardcn.com/docs/components/period-tabs.md): A small segmented control for switching a chart between week, month, and year. - [Radial Gauge](https://dashboardcn.com/docs/components/radial-gauge.md): A semicircular or ring gauge, continuous or segmented, with content in the middle. - [Segmented Meter](https://dashboardcn.com/docs/components/segmented-meter.md): A zoned bar meter with a marker at the current value, for heart-rate zones, allocations, or thresholds. - [Sparkline](https://dashboardcn.com/docs/components/sparkline.md): A tiny inline area or line chart for showing a trend at a glance. - [Tick Bar](https://dashboardcn.com/docs/components/tick-bar.md): A progress bar drawn as a row of ticks, lit up to the current value. - [Timeline](https://dashboardcn.com/docs/components/timeline.md): A vertical chronology of events, each with a marker, connector, and free-form content. Use it for audit logs, activity feeds, and version history. - [Trend Chart](https://dashboardcn.com/docs/components/trend-chart.md): Area, line, or bar chart over time with tooltips and legend, built on shadcn's chart primitives. ## Blocks - [Allocation Card](https://dashboardcn.com/docs/blocks/allocation-card.md): A share-of-total card with a period switcher, a big percentage with delta, a tick bar, and a footer stat with an avatar stack. - [Balance Chart Card](https://dashboardcn.com/docs/blocks/balance-chart-card.md): A balance or price card with a big value, delta, stat row, and a line chart with reference line and peak marker. - [Breakdown Card](https://dashboardcn.com/docs/blocks/breakdown-card.md): A total with delta and a list of contributors, each with a value and a hatched bar showing its share. - [Data Table Card](https://dashboardcn.com/docs/blocks/data-table-card.md): A card around a data table: title, description, toolbar, rows, and pagination in the footer. - [Distribution Card](https://dashboardcn.com/docs/blocks/distribution-card.md): A total with delta, a stacked share bar, and a ranked list of the contributors with their values. - [Dot Plot Card](https://dashboardcn.com/docs/blocks/dot-plot-card.md): A metric card with a big value, a dot-plot distribution with its peak called out, and the change vs the previous period. - [Dual Metric Card](https://dashboardcn.com/docs/blocks/dual-metric-card.md): A card with two metrics side by side, each with a value, share badge, meter, and a supporting fact. - [Insight Card](https://dashboardcn.com/docs/blocks/insight-card.md): A hero card with a badge, a very large number, a headline, and a paged set of insights over a soft gradient. - [KPI Row Card](https://dashboardcn.com/docs/blocks/kpi-row-card.md): A card with a period switcher, a row of KPI tiles with sparklines and deltas, and a footer summary. - [Metric Tabs Chart Card](https://dashboardcn.com/docs/blocks/metric-tabs-chart-card.md): A row of metric tabs, each with a value and delta, above a line chart of the selected metric against the previous period. Click a tab to switch the chart. - [Period Bar Chart Card](https://dashboardcn.com/docs/blocks/period-bar-chart-card.md): A card with a total for the selected period, a range switcher, and a bar chart that highlights that period. Click a bar to select its period. - [Progress Card](https://dashboardcn.com/docs/blocks/progress-card.md): A compact progress card with an icon title, a pill tick bar, and a count with a secondary stat. - [Ring KPI Card](https://dashboardcn.com/docs/blocks/ring-kpi-card.md): A card with a row of KPI tiles, each with a segmented ring next to the value and a comparison to the previous value. - [Status Gauge Card](https://dashboardcn.com/docs/blocks/status-gauge-card.md): A status card with a headline word, a metric, an avatar stack, and a segmented semicircular gauge. - [Tick KPI Card](https://dashboardcn.com/docs/blocks/tick-kpi-card.md): A card with a row of KPI tiles, each with a value out of a whole and a tick bar showing how far along it is. ## Registry - [registry.json](https://dashboardcn.com/r/registry.json): Index of every item with its files and dependencies. - [Item JSON](https://dashboardcn.com/r/.json): The shadcn registry item for one component or block. ## Optional - [llms-full.txt](https://dashboardcn.com/llms-full.txt): Every page above concatenated into one file, including all component source. - [Agent skill](https://dashboardcn.com/r/skill.json): A skill for coding agents: catalog, data conventions, layout patterns, and a props reference. Install with `npx shadcn@latest add @dashboardcn/skill` or `npx skills add NoahGdev/dashboardcn`. - [GitHub](https://github.com/NoahGdev/dashboardcn): Source repository.