Skip to content
DocsWidgetsSignal widgetLast updated Nov 2, 2026

Signal widget

Signal is the second widget language: the same shell, parts and props as Hearth, drawn flat and straight for AI and ops products. Hairline cards, sentence case, no shadows. Signal and its widgets come with Code and Complete.

Get the code
Budget runway: company cards · september $40K USDCard spend by month, January to September, in $K. September (month to date) is 40K; the highest month is July at 71K.Budget runwayOctober 2026Company cards · September$40KUSD−4%Pace vs August48kJan52kFeb61kMar57kApr66kMay59kJun71kJul68kAug40kSepMonth to dateClosed monthsBilling synced 5 min agoOpen budget
Monthly card spend
MonthSpend
JAN$48K
FEB$52K
MAR$61K
APR$57K
MAY$66K
JUN$59K
JUL$71K
AUG$68K
SEP$40K
PartWhat it holdsIn Figma
HeaderTitle, period, info and menusignal/header
ChartAny of the 100+ typeschart · instance swap
BlocksUp to two of the 11 blocksblock 1, block 2, show block
FooterStatus and one buttonsignal/footer

In code

agent-runs.tsx
import "@/lib/chartory/charts/signal" // once, in your root layoutimport { BarsWidget } from "@/components/chartory/widgets/bars"<BarsWidget  collection="signal"  header={{ title: "Agent runs", period: "Last 7 days" }}  hero={{ caps: "Runs · today", value: "1,284", delta: { text: "+12%", tone: "success" } }}  footer={{ status: "Live", live: true }}/>

Widths

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

Overlays

OverlayWhat it is for
Date pickerChoosing the period in the header
More menuActions on the widget
Info popoverWhat the number means
TooltipThe value under the pointer
ToastConfirming an action

Stay in the loop

New charts, by email.

Get an email when new chart types and releases ship.

Unsubscribe any time.