Dashboard components for shadcn/ui.
KPI cards, charts, funnels, tables, and the pieces around them. Built on the same foundations as shadcn/ui and installed the same way. You own the code.
Opens the app with a prompt ready to send, or the web app if it is not installed. Nothing runs until you press enter.
Featured Blocks
Complete cards composed from the primitives. Drop one in and pass your data. Every block links to the components it is built from.
- Portfolio allocation46%+3.4%vs prior periodEquities exposure: $4.7M6 members
KAllocation CardA share-of-total card with a period switcher, a big percentage with delta, a tick bar, and a footer stat with an avatar stack.
- Gross volume$41,540+15.0%
- Online payments$26,800
- Subscriptions$10,400
- In-store sales$4,340
Breakdown CardA total with delta and a list of contributors, each with a value and a hatched bar showing its share.
Built withDelta BadgeMetric Value
- Capital inflows$12.4M+$390K
- WaveMark CapitalCapital in$7.93M
- Envato FinancesCapital in$3.21M
- QBridge TechCapital in$1.25M
Distribution CardA total with delta, a stacked share bar, and a ranked list of the contributors with their values.
Built withDelta BadgeDistribution BarMetric Value
- WaveMark Capital
- TransactionsPeak: Wed106Kvs last period+34,002Dot Plot Card
A metric card with a big value, a dot-plot distribution with its peak called out, and the change vs the previous period.
Built withDot PlotMetric Value
- Leads overview5421.43%New leadsTop sourceLinkedIn198Returning leadsConversion rate12.8%Dual Metric Card
A card with two metrics side by side, each with a value, share badge, meter, and a supporting fact.
Built withTick BarMetric Value
- InsightsInsight Card
A hero card with a badge, a very large number, a headline, and a paged set of insights over a soft gradient.
Built withMetric Value
20 components and counting
Browse components- Activity HeatmapA calendar heatmap of daily activity, in the style of a contribution graph.
- Bar ChartA single-series bar chart with gradient or striped fills, highlighted bars, and a hover marker.
- Bar ListA ranked list with proportional bars, for top pages, referrers, or countries.
- Composed ChartMix areas, lines, and bars in one chart with dual axes, reference lines, peak markers, and hatched bars.
- Data TableA sortable, filterable, paginated table with column visibility, row selection, sticky and reorderable columns, and loading states, built on TanStack Table v9.
- Delta BadgeA signed percentage change with a trend icon, colored by whether the change is good.
- Distribution BarA single stacked bar showing how a total splits across categories.
- Donut ChartA donut, pie, or half-donut with a center label, tooltip, and legend, on shadcn's chart primitives.
- Dot PlotA distribution drawn as columns of stacked dots, with the peak columns at full strength.
- Funnel ChartStep-by-step conversion with drop-off between steps and overall conversion.
- KPI CardA metric card with value, period-over-period delta, and an optional sparkline.
- Metric ListCompact rows of label, sparkline, value, and delta.
- Metric ValueA 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 TabsA small segmented control for switching a chart between week, month, and year.
- Radial GaugeA semicircular or ring gauge, continuous or segmented, with content in the middle.
- Segmented MeterA zoned bar meter with a marker at the current value, for heart-rate zones, allocations, or thresholds.
- SparklineA tiny inline area or line chart for showing a trend at a glance.
- Tick BarA progress bar drawn as a row of ticks, lit up to the current value.
- TimelineA vertical chronology of events, each with a marker, connector, and free-form content. Use it for audit logs, activity feeds, and version history.
- Trend ChartArea, line, or bar chart over time with tooltips and legend, built on shadcn's chart primitives.