# Hearth widget

> Hearth is the widget kit: one shell with a header, a chart, up to two blocks and a footer. Every part is a component you swap, so one shell makes every widget. Widgets come with Code and Complete.

| Part | What it holds | In Figma |
| --- | --- | --- |
| Header | Title, period, info and menu | `hearth/header` |
| Chart | Any of the 100+ types | chart · instance swap |
| Blocks | Up to two of the 11 blocks | block 1, block 2, show block |
| Footer | Status and one button | `hearth/footer` |

## In code

revenue-card.tsx:

```tsx
import { BarAndLineComboWidget } from "@/components/chartory/widgets/bar-and-line-combo"

<BarAndLineComboWidget
  header={{ title: "MRR growth", period: "Q3 2026" }}
  hero={{ caps: "MRR · SEPTEMBER", value: "$84K", delta: { text: "+6%", tone: "success" } }}
  blocks={[["goal", ["Q3 target", "$90K", "$84K", "of $90K", "93%", "8 days left"]]]}
  footer={{ status: "Synced 4 min ago", button: "Open report" }}
/>
```

## Widths

A Hearth widget is **480 px** wide in Figma; the chart inside takes the size that fits it.

## Overlays

| Overlay | What it is for |
| --- | --- |
| Date picker | Choosing the period in the header |
| More menu | Actions on the widget |
| Info popover | What the number means |
| Tooltip | The value under the pointer |
| Toast | Confirming an action |