Composition pattern: embed a chart inside a card so the chart reads as a dashboard tile, not as raw data. Header communicates the metric in words; chart shows the shape; footer adds context.
Naked charts are rare in dashboards — they almost always sit inside a card that supplies the metric name, current value, and a verbal summary. Prefer this pattern whenever a chart is the primary content of a card, regardless of chart type.
KPI + trend shape. Used in overview rows to show 4–6 metrics side-by-side.
Chart as primary content. Header names the metric; footer adds a supporting action.
Stat in header pairs with the chart so the current value is legible before the chart renders.
Chart shows aggregate; breakdown beneath gives the composition. Most SaaS "Overview" tiles follow this shape.
Footer carries trend narrative + period caption using the new footer heading / description slot routing (symmetric with header). Shadcn-style revenue card translated to AdiaUI primitives.
Stat-ui's chart slot positions a sparkline to the right of the hero number — KPI and its trajectory as one visual unit.
A segmented-ui in the header's action slot drives a time-range selection. Wire its value to refetch / slice the chart's .data via a controller.
bleed on the card's <section> so the line touches the edges.hide-values on bar/line charts inside cards — the stat in the header already shows the current number.<stat-ui> in the heading slot only when the card's primary metric is a single number; otherwise use <h3> + description.