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