## When to use

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.

## Sparkline tile

KPI + trend shape. Used in overview rows to show 4–6 metrics side-by-side.

## Page Views

84,232

## Full chart with framing

Chart as primary content. Header names the metric; footer adds a supporting action.

### Revenue

Last 12 months

## Chart + headline stat

Stat in header pairs with the chart so the current value is legible before the chart renders.

## Chart + inline breakdown

Chart shows aggregate; breakdown beneath gives the composition. Most SaaS "Overview" tiles follow this shape.

### Sessions

This week

## Trend footer

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.

### Revenue

January – March 2024

## Stat with inline sparkline

Stat-ui's `chart` slot positions a sparkline to the right of the hero number — KPI and its trajectory as one visual unit.

## Chart with filter pills

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.

### Sessions

## Anatomy

<card-ui> <header> <!-- name + current value --> <span slot="heading"><h3>Revenue</h3></span> <text-ui slot="description" color="subtle">Last 12 months</text-ui> </header> <section> <!-- the chart — bleed=true removes padding for sparklines --> <chart-ui type="bar" x="month" y="revenue"></chart-ui> </section> <footer> <!-- optional CTA or supporting context --> <button-ui text="View report" variant="outline" block></button-ui> </footer> </card-ui>

## Rules

- For sparklines, set `bleed` on the card's `<section>` so the line touches the edges.
- Put `hide-values` on bar/line charts inside cards — the stat in the header already shows the current number.
- Use `<stat-ui>` in the heading slot only when the card's primary metric is a single number; otherwise use `<h3>` + description.
- Keep breakdowns shallow — 3–4 stats max. More belongs in a full section, not inside a tile.