---
name: "@dashboardcn"
slug: "dashboardcn"
description: "Dashboard and analytics components for shadcn/ui. KPI cards, charts, funnels, ranked lists, heatmaps, data tables, and the cards that combine them. Free and MIT licensed."
category: "Charts/data viz"
tags: ["cards", "charts", "dashboard", "e-commerce", "forms", "loaders", "maps", "navigation", "payments", "tables"]
framework: "react"
license: null
author: "NoahGdev"
website: "https://dashboardcn.com"
github: "https://github.com/NoahGdev/dashboardcn"
registry: "https://dashboardcn.com/r/registry.json"
pro: false
pro_url: null
github_stars: 4
component_count: 54
generated_at: "2026-09-21T01:50:16.753Z"
---

# @dashboardcn

Dashboard and analytics components for shadcn/ui. KPI cards, charts, funnels, ranked lists, heatmaps, data tables, and the cards that combine them. Free and MIT licensed.

## Links

- Website: https://dashboardcn.com
- GitHub: https://github.com/NoahGdev/dashboardcn
- Registry JSON: https://dashboardcn.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/dashboardcn
- This file: https://sh4dcn.vercel.app/md/dashboardcn.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://dashboardcn.com/r/registry.json
pnpm dlx shadcn@latest add https://dashboardcn.com/r/registry.json
bunx shadcn@latest add https://dashboardcn.com/r/registry.json
# clone the source repo
git clone https://github.com/NoahGdev/dashboardcn.git
# fetch the raw registry index
curl -s https://dashboardcn.com/r/registry.json
```

## Components (54)

| name | type | description | install |
| --- | --- | --- | --- |
| format | registry:lib | Number, currency, percent, and delta formatters for analytics UI. | `npx shadcn@latest add https://dashboardcn.com/r/format.json` |
| sparkline | registry:ui | A tiny inline area or line chart for showing a trend at a glance. | `npx shadcn@latest add https://dashboardcn.com/r/sparkline.json` |
| kpi-card | registry:ui | A metric card with value, period-over-period delta, and an optional sparkline. | `npx shadcn@latest add https://dashboardcn.com/r/kpi-card.json` |
| bar-list | registry:ui | A ranked list with proportional bars, for top pages, referrers, or countries. | `npx shadcn@latest add https://dashboardcn.com/r/bar-list.json` |
| distribution-bar | registry:ui | A single stacked bar showing how a total splits across categories. | `npx shadcn@latest add https://dashboardcn.com/r/distribution-bar.json` |
| funnel-chart | registry:ui | Step-by-step conversion, as stacked bars with drop-off or as a flow of tapering stages with a tile per step. | `npx shadcn@latest add https://dashboardcn.com/r/funnel-chart.json` |
| activity-heatmap | registry:ui | A calendar heatmap of daily activity, in the style of a contribution graph. | `npx shadcn@latest add https://dashboardcn.com/r/activity-heatmap.json` |
| trend-chart | registry:ui | Area, line, or bar chart over time with tooltips and legend, built on shadcn's chart primitives. | `npx shadcn@latest add https://dashboardcn.com/r/trend-chart.json` |
| bar-chart | registry:ui | A single-series bar chart with gradient or striped fills, highlighted bars, and a hover marker. | `npx shadcn@latest add https://dashboardcn.com/r/bar-chart.json` |
| data-table | registry:ui | A sortable, filterable, paginated table with column visibility, row selection, sticky and reorderable columns, and loading states, built on TanStack Table v9. | `npx shadcn@latest add https://dashboardcn.com/r/data-table.json` |
| delta-badge | registry:ui | A signed percentage change with a trend icon, colored by whether the change is good. | `npx shadcn@latest add https://dashboardcn.com/r/delta-badge.json` |
| metric-value | registry:ui | A formatted number that abbreviates large values and shows the full value in a tooltip on hover. | `npx shadcn@latest add https://dashboardcn.com/r/metric-value.json` |
| radial-gauge | registry:ui | A semicircular or ring gauge, continuous or segmented, with content in the middle. | `npx shadcn@latest add https://dashboardcn.com/r/radial-gauge.json` |
| donut-chart | registry:ui | A donut, pie, or half-donut with a center label, tooltip, and legend, on shadcn's chart primitives. | `npx shadcn@latest add https://dashboardcn.com/r/donut-chart.json` |
| composed-chart | registry:ui | Mix areas, lines, and bars in one chart with dual axes, reference lines, peak markers, and hatched bars. | `npx shadcn@latest add https://dashboardcn.com/r/composed-chart.json` |
| segmented-meter | registry:ui | A zoned bar meter with a marker at the current value, for heart-rate zones, allocations, or thresholds. | `npx shadcn@latest add https://dashboardcn.com/r/segmented-meter.json` |
| period-tabs | registry:ui | A small segmented control for switching a chart between week, month, and year. | `npx shadcn@latest add https://dashboardcn.com/r/period-tabs.json` |
| metric-list | registry:ui | Compact rows of label, sparkline, value, and delta. | `npx shadcn@latest add https://dashboardcn.com/r/metric-list.json` |
| tick-bar | registry:ui | A progress bar drawn as a row of ticks, lit up to the current value. | `npx shadcn@latest add https://dashboardcn.com/r/tick-bar.json` |
| dot-plot | registry:ui | A distribution drawn as columns of stacked dots, with the peak columns at full strength. | `npx shadcn@latest add https://dashboardcn.com/r/dot-plot.json` |
| timeline | registry:ui | A vertical chronology of events, each with a marker, connector, and free-form content. Use it for audit logs, activity feeds, and version history. | `npx shadcn@latest add https://dashboardcn.com/r/timeline.json` |
| activity-rings | registry:ui | Concentric progress rings, one per goal, in the style of a fitness watch. | `npx shadcn@latest add https://dashboardcn.com/r/activity-rings.json` |
| heatmap-chart | registry:ui | A matrix heatmap with a row per line and a column per label, e.g. weekday by hour, with hover highlighting and tooltips. | `npx shadcn@latest add https://dashboardcn.com/r/heatmap-chart.json` |
| radar-chart | registry:ui | A filled, outlined, or dotted radar chart with polygon or circle grids, for scores and multi-series comparisons. | `npx shadcn@latest add https://dashboardcn.com/r/radar-chart.json` |
| scatter-chart | registry:ui | Correlation dots per series that become bubbles when a size key is set, with a per-point tooltip and legend. | `npx shadcn@latest add https://dashboardcn.com/r/scatter-chart.json` |
| sankey-chart | registry:ui | A flow diagram with tinted links, colored node bars, and share labels, on shadcn's chart primitives. | `npx shadcn@latest add https://dashboardcn.com/r/sankey-chart.json` |
| kpi-row-card | registry:block | A card with a period switcher, a row of KPI tiles with sparklines and deltas, and a footer summary. | `npx shadcn@latest add https://dashboardcn.com/r/kpi-row-card.json` |
| balance-chart-card | registry:block | A balance or price card with a big value, delta, stat row, and a line chart with reference line and peak marker. | `npx shadcn@latest add https://dashboardcn.com/r/balance-chart-card.json` |
| status-gauge-card | registry:block | A status card with a headline word, a metric, an avatar stack, and a segmented semicircular gauge. | `npx shadcn@latest add https://dashboardcn.com/r/status-gauge-card.json` |
| ring-kpi-card | registry:block | A card with a row of KPI tiles, each with a segmented ring next to the value and a comparison to the previous value. | `npx shadcn@latest add https://dashboardcn.com/r/ring-kpi-card.json` |
| distribution-card | registry:block | A total with delta, a stacked share bar, and a ranked list of the contributors with their values. | `npx shadcn@latest add https://dashboardcn.com/r/distribution-card.json` |
| tick-kpi-card | registry:block | 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. | `npx shadcn@latest add https://dashboardcn.com/r/tick-kpi-card.json` |
| allocation-card | registry:block | 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. | `npx shadcn@latest add https://dashboardcn.com/r/allocation-card.json` |
| dual-metric-card | registry:block | A card with two metrics side by side, each with a value, share badge, meter, and a supporting fact. | `npx shadcn@latest add https://dashboardcn.com/r/dual-metric-card.json` |
| period-bar-chart-card | registry:block | A card with a total for the selected period, a range switcher, and a bar chart that highlights that period. | `npx shadcn@latest add https://dashboardcn.com/r/period-bar-chart-card.json` |
| progress-card | registry:block | A compact progress card with an icon title, a pill tick bar, and a count with a secondary stat. | `npx shadcn@latest add https://dashboardcn.com/r/progress-card.json` |
| breakdown-card | registry:block | A total with delta and a list of contributors, each with a value and a hatched bar showing its share. | `npx shadcn@latest add https://dashboardcn.com/r/breakdown-card.json` |
| dot-plot-card | registry:block | A metric card with a big value, a dot-plot distribution with its peak called out, and the change vs the previous period. | `npx shadcn@latest add https://dashboardcn.com/r/dot-plot-card.json` |
| insight-card | registry:block | A hero card with a badge, a very large number, a headline, and a paged set of insights over a soft gradient. | `npx shadcn@latest add https://dashboardcn.com/r/insight-card.json` |
| metric-tabs-chart-card | registry:block | A row of metric tabs, each with a value and delta, above a line chart of the selected metric against the previous period. | `npx shadcn@latest add https://dashboardcn.com/r/metric-tabs-chart-card.json` |
| data-table-card | registry:block | A card around a data table: title, toolbar, rows, and pagination in the footer. | `npx shadcn@latest add https://dashboardcn.com/r/data-table-card.json` |
| activity-rings-card | registry:block | A card with concentric goal rings and a tile per ring with its value. Hovering a tile or a ring focuses the pair. | `npx shadcn@latest add https://dashboardcn.com/r/activity-rings-card.json` |
| funnel-chart-card | registry:block | A conversion card with a flow funnel: a headline value with delta, a range picker that carries its own steps, and a tile per stage. Hovering a stage swaps the … | `npx shadcn@latest add https://dashboardcn.com/r/funnel-chart-card.json` |
| stage-bars-card | registry:block | The funnel as a list: a rounded bar per stage with its name, value, and share of the first stage, a range picker, and a tile per stage. | `npx shadcn@latest add https://dashboardcn.com/r/stage-bars-card.json` |
| contributions-card | registry:block | A contribution-graph card: a headline total with delta, a row of stat tiles, a period switcher, and a year of daily activity. | `npx shadcn@latest add https://dashboardcn.com/r/contributions-card.json` |
| heatmap-chart-card | registry:block | A card with a headline total, a delta, an optional period switcher, and a matrix heatmap whose hovered cell swaps into the headline. | `npx shadcn@latest add https://dashboardcn.com/r/heatmap-chart-card.json` |
| score-gauge-card | registry:block | A score card with a headline word, a radial gauge around the score, and a breakdown list of labelled bars. | `npx shadcn@latest add https://dashboardcn.com/r/score-gauge-card.json` |
| goal-chart-card | registry:block | A card with a total, a period switcher, and a bar chart with a dashed goal line that colors the bars reaching it. | `npx shadcn@latest add https://dashboardcn.com/r/goal-chart-card.json` |
| corner-frame | registry:ui | A content frame with configurable registration marks at every corner. | `npx shadcn@latest add https://dashboardcn.com/r/corner-frame.json` |
| command-palette | registry:ui | A data-driven Command+K menu with dialog and inline variants, grouped results, metadata, shortcuts, and a replaceable footer. | `npx shadcn@latest add https://dashboardcn.com/r/command-palette.json` |
| revenue-ring-card | registry:block | A centered revenue metric inside a dense segmented ring, with a legend and full-width action. | `npx shadcn@latest add https://dashboardcn.com/r/revenue-ring-card.json` |
| payment-summary-card | registry:block | A segmented customer metric above a compact payment or record summary with status and action. | `npx shadcn@latest add https://dashboardcn.com/r/payment-summary-card.json` |
| commerce-kpi-row | registry:block | A responsive metric strip with dotted sparklines, semantic deltas, and registration-mark corners. | `npx shadcn@latest add https://dashboardcn.com/r/commerce-kpi-row.json` |
| skill | registry:file | A skill that teaches coding agents how to pick, install, and compose dashboardcn components. | `npx shadcn@latest add https://dashboardcn.com/r/skill.json` |

## For AI agents

```text
You are adding components from @dashboardcn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/dashboardcn.md) for the component list.
2. Fetch the machine-readable index: https://dashboardcn.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: dashboardcn).
```