Components

Every type from the Glance component registry. Each node has id, type, optional style, and type-specific bindings. Style fields listed here are the ones the interpreter reads. Chart, grid, table, and views are Pro+ at author time.

Extra style keys are ignored. Wrong CSS names do nothing — see Design System. This list is generated from the same registry the API and iOS app use.

container

layout · children allowed

Node field layout (not style): vertical | horizontal | z-stack. Optional href makes the whole block tappable.

Kind	Fields
Bindings	href (url, optional)
Style	padding, background, backgroundImage, cornerRadius, spacing, alignment, width, height, flex, borderColor, borderWidth, opacity

spacer

layout

Use flex: 1 to push a footer to the bottom on large widgets.

Kind	Fields
Bindings	—
Style	minLength, flex

text

content

Set maxLines: 1 on titles and hero lines in small and medium widgets.

Kind	Fields
Bindings	binding (string, required)
Style	fontSize, fontWeight, fontFamily, color, maxLines, alignment

image

content

HTTPS URLs only on device. contentMode is fill or fit. fillContainer stretches to the parent.

Kind	Fields
Bindings	binding (url, required)
Style	width, height, cornerRadius, contentMode, fillContainer

icon

content

binding is an SF Symbol name (for example bag.fill). weight styles the symbol, not fontWeight.

Kind	Fields
Bindings	binding (string, required)
Style	fontSize, color, weight

avatar

content

image is optional; fallback initials show when the URL is empty.

Kind	Fields
Bindings	image (url, optional), fallback (string, optional)
Style	size, backgroundColor, textColor

progress_bar

indicator

binding is 0–100.

Kind	Fields
Bindings	binding (number, required)
Style	height, trackColor, fillColor, cornerRadius

circular_progress

indicator

Typical size ~70 and lineWidth ~5 inside an 82×82 container.

Kind	Fields
Bindings	binding (number, required)
Style	lineWidth, trackColor, fillColor, size

stat

indicator

Hero metrics. suffix and decimals are style, not bindings.

Kind	Fields
Bindings	value (number, required), label (string, optional)
Style	valueFontSize, labelFontSize, suffix, decimals, color, alignment

status_dot

indicator

gap is valid here (space between the dot and the label). On containers use spacing, not gap.

Kind	Fields
Bindings	label (string, required), dotColor (color, optional)
Style	dotSize, fontSize, color, gap

badge

indicator

Short pills and tags.

Kind	Fields
Bindings	binding (string, required)
Style	backgroundColor, color, fontSize, cornerRadius, padding

divider

decoration

orientation is horizontal or vertical.

Kind	Fields
Bindings	—
Style	color, thickness, padding, orientation

gradient

decoration · children allowed

Linear wash, often as the root. Children are allowed.

Kind	Fields
Bindings	—
Style	type, startColor, endColor, angle, padding, cornerRadius, spacing, alignment

button

interactive

Tappable action. href is required.

Kind	Fields
Bindings	href (url, required), label (string, optional)
Style	backgroundColor, color, fontSize, cornerRadius, padding

link

interactive

Inline text link. href is required.

Kind	Fields
Bindings	href (url, required), label (string, optional)
Style	color, fontSize, underline

timer

time

Countdown to a date binding. Shows 0:00 after the target.

Kind	Fields
Bindings	binding (date, required)
Style	fontSize, color, fontWeight

clock

time

Live current time. Optional binding is a timezone identifier. format: omit for locale short time, or 24h.

Kind	Fields
Bindings	binding (string, optional)
Style	fontSize, color, fontWeight, format

date

time

Bind ISO 8601 datetimes here, not to text. Set style.format — see the date formats table.

Kind	Fields
Bindings	binding (date, required)
Style	fontSize, fontWeight, fontFamily, color, format

relative_time

time

“2h ago” / “in 3 days” from a date binding.

Kind	Fields
Bindings	binding (date, required)
Style	fontSize, fontWeight, fontFamily, color

shape

decoration

Free v2. variant is circle | rectangle | capsule | line | triangle. size wins over width/height. fillColor, strokeColor, and opacity accept maps (from + stops or when). Line ignores fill. Optional href.

Kind	Fields
Bindings	href (url, optional)
Style	size, width, height, fillColor, strokeColor, strokeWidth, cornerRadius, opacity

calendar

time

Free v2. Does not call EventKit. events is event[] ({ start, title, end?, color? }). variant is agenda | columns | month. Omit day/month to use today / this month on-device. columns uses node days: 1, 3, or 7. Month shows dots, not titles. Style: headerFontSize/headerColor, eventFontSize/eventColor, dotColor, todayColor, gridColor, maxEvents.

Kind	Fields
Bindings	events (event[], required), day (date, optional), month (date, optional)
Style	width, height, headerFontSize, headerColor, eventFontSize, eventColor, dotColor, todayColor, gridColor, maxEvents, opacity

chart

indicator

Pro+ v2 (family_charts). variant is bar | line | pie | candle | scatter. Line/scatter/candle: x number[] (unix or hour-of-day; ISO date strings accepted) + y number[]. Bar: y required, optional x string[] categories. Pie: y + labels, max 8 slices. Others max 24 points. Default pie palette: #7B61FF #34C759 #FF9500 #FF3B30 #007AFF #AF52DE. showAxes false is a sparkline. showAxes true draws the plot plane (grid, Y scale, X labels). Bar-only showAverage: true draws a dashed rule at mean(y) so each bar can be judged against a typical day; optional averageColor (default #636366). Pair with showAxes. Line/pie/scatter/candle ignore it. innerRadius 0.55 is a donut. curve is linear | smooth. Do not use bar_chart / pie_chart.

Kind	Fields
Bindings	href (url, optional), y (number[], optional), labels (string[], optional), open (number[], optional), high (number[], optional), low (number[], optional), close (number[], optional), sizes (number[], optional)
Style	width, height, strokeColor, strokeWidth, fillColor, showAxes, showLabels, labelFontSize, labelColor, axisColor, orientation, barGap, cornerRadius, showValues, colorScale, showAverage, averageColor, showDots, dotSize, curve, size, innerRadius, colors, upColor, downColor, opacity

grid

indicator

Pro+ v2 (family_grid). variant is activity (omit = activity). rows and columns are positive ints on the node (not bindings). binding is number[] of length rows × columns, max 400 (7×52 fits). cellShape is square | circle | triangle. cellGap default 2, cellCornerRadius 2. colorScale maps each cell value; emptyColor (#EBEDF0) is zero. Week strip is rows: 1, columns: 7. No per-cell tap.

Kind	Fields
Bindings	href (url, optional), binding (number[], required)
Style	width, height, cellShape, cellGap, cellCornerRadius, colorScale, emptyColor, opacity

table

indicator

Pro+ v2 (family_table). columns and cells are string[] bindings — columns: 3 (a number) is illegal here. rows is optional row headers. cells are row-major. Max 4 columns × 6 rows. Numbers in cells coerce to string. colorScale heats a cell only if the string parses as a number. Style: showColumnHeaders, showRowHeaders, headerBackground, headerColor, cellColor, cellFontSize, gridColor, gridWidth, cellPadding. Clip, no scroll.

Kind	Fields
Bindings	href (url, optional), cells (string[], required)
Style	width, height, showColumnHeaders, showRowHeaders, headerBackground, headerColor, cellColor, cellFontSize, gridColor, gridWidth, cellPadding, colorScale, opacity

Date formats (`date` component)

Cloud integrations store datetimes as ISO 8601 strings. Bind them to the date component (or relative_time for relative phrasing) — not text, which shows the raw ISO string on device. Set style.format on the node:

format	Display
short	Date only — locale short date (e.g. 04/08/26)
medium	Date only — locale medium date (default)
long	Date only — locale long date
time	Time only — locale 12h/24h
datetime	Date + time — locale short date and time
iso	yyyy-MM-dd

bar_chart and pie_chart are invalid names. Use type: "chart" with variant: "bar" or "pie". Do not invent webview or extra types. Full recipes for mapping, views, and every density style live in the design system and the design skill.