Widgets
Hearth: widgets that read like a product.
A header, a number, a chart, two blocks.
- 01HeaderTitle, info tip, date range and the more menu.
- 02HeroThe number that matters, with its delta and comparison.
- 03ChartAny of the 100+ types, at the size class that fits.
- 04BlockUp to two of eleven: goal, rank, chips, events, share, alert, tabs, table, split, link or tiles.
- 05FooterLive status, source and a link out.
- 06OverlaysDate pickers, menus, six tooltip types, loading, empty and error states.
All 100+ types
Any chart drops into the same card.
The header, the hero number and the footer stay. The chart slides in with its own data, and all 100+ types fit the card.
042 Waterfallof 100+ chart types
- 24Change over time
- 19Compare items
- 16Part of a whole
- 17Distribution
- 11Flow between steps
- 17Relationship
- 19Schedule and status
- 9Space and place
Collections
One widget, two languages.
Every plan gets every collection. The same widget and the same data, drawn in each collection’s language. Pick a collection in the nav and every chart and widget on the site follows.
HearthCollection 01
SignalCollection 02
More collections are in the works. Each one restyles every chart and widget in its own language, in every plan.
See collectionsOverlays
Every widget ships with its overlays.
Date pickers, menus, a popover, a legend toggle, a toast and six tooltip types, on the deep surface the widgets use. Each one is a component in the Figma file.
Date range
More menu · Filter menu
Info popover
Legend toggle
Series · Compare
Range · Cell
Value · Axis
Toast
Next
Build your own Hearth widget.
The docs walk through the parts, the eleven blocks and the props. Pricing shows which plan holds the Figma kit and which holds the code.
Hearth widget docs
Anatomy, the eleven blocks, the props and the install command, with a live preview.
Read the docsPlans
The Hearth Figma kit is in Figma and Complete. The widget code is in Code and Complete. Pay once, every update.
Compare plans