dashboardcn

Search documentation

Search for a page or component.

Blocks

PreviousNext

Complete cards composed from the primitives. Drop one in and pass your data.

Activity Rings CardA card with concentric goal rings and a tile per ring with its value. Hovering a tile or a ring focuses the pair.Allocation 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.Balance Chart CardA balance or price card with a big value, delta, stat row, and a line chart with reference line and peak marker.Breakdown CardA total with delta and a list of contributors, each with a value and a hatched bar showing its share.Commerce KPI RowA responsive metric strip with dotted sparklines, semantic deltas, and registration-mark corners.Contributions CardA contribution-graph card: a headline total with delta, a row of stat tiles, a period switcher, and a year of daily activity.Data Table CardA card around a data table: title, description, toolbar, rows, and pagination in the footer.Distribution CardA total with delta, a stacked share bar, and a ranked list of the contributors with their values.Dot Plot CardA metric card with a big value, a dot-plot distribution with its peak called out, and the change vs the previous period.Dual Metric CardA card with two metrics side by side, each with a value, share badge, meter, and a supporting fact.Funnel Chart CardA 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.Goal Chart CardA card with a total, a period switcher, and a bar chart with a dashed goal line that colors the bars reaching it.Heatmap Chart CardA card with a headline total, a delta, an optional period switcher, and a matrix heatmap whose hovered cell swaps into the headline.Insight CardA hero card with a badge, a very large number, a headline, and a paged set of insights over a soft gradient.KPI Row CardA card with a period switcher, a row of KPI tiles with sparklines and deltas, and a footer summary.Metric Tabs Chart CardA 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.Payment Summary CardA segmented customer metric above a compact payment or record summary with status, action, and a reduced-motion-safe meter reveal.Period Bar Chart CardA 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 CardA compact progress card with an icon title, a pill tick bar, and a count with a secondary stat.Revenue Ring CardA centered revenue metric inside a dense segmented ring, with a dotted legend, full-width action, and a reduced-motion-safe chart reveal.Ring KPI CardA card with a row of KPI tiles, each with a segmented ring next to the value and a comparison to the previous value.Score Gauge CardA score card with a headline word, a radial gauge around the score, and a breakdown list of labelled bars.Stage Bars CardThe 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.Status Gauge CardA status card with a headline word, a metric, an avatar stack, and a segmented semicircular gauge.Tick KPI CardA 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.