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.
In code
revenue-card.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.