The shape gallery
Every one of the 42 shapes in this app's registry, drawn from its worked example. The list of shapes below comes from the registry itself, so a shape that is published but cannot be drawn shows up here as a fallback rather than as nothing at all. The written half is at [/docs](/docs).
Text
Prose, labels, and the things a page says in words.
text.eyebrow
Tuesday, 15 August
text.heading
Your morning
text.paragraph
Three things need you today. The 9:30 with Priya moved to the small room, the invoice from Kestrel cleared overnight, and your flight on Thursday is now boarding an hour earlier.
text.callout
text.quote
Happy to move it, but I only have the small room, so bring the laptop rather than the deck.
text.code
pnpm build --filter instinct
vercel deploy --prebuilt --prodtext.key_values
- Flight
- BA 1476
- Boarding
- 10:05, gate B12
- Seat
- 14A, windowchanged
- Bag
- Carry-on only
text.badges
- Rescheduled
- Paid
- Needs you
- FYI
text.sources
Sources3
- MailPriya, Re: 9:3007:12
- RecordKestrel Ltd, invoice 4471 paid
- CallBritish Airways, schedule changeno link, SMS
Lists
Every way to say 'these, in this order', from a run of rows to a rail of tiles.
list.bullets
What changed overnight
- Kestrel paid invoice 4471 in full. Nothing owed.
- The 9:30 moved rooms; same time, small room.
- Thursday's flight now boards at 10:05, an hour earlier than booked.
list.steps
Before you leave
- Print the two signature pagesThey are in the Kestrel folder.
- Move the car off the driveThe skip arrives at 09:00.
- Take the laptop, not the deck
list.items
list.feed
- 03:44Kestrel paid invoice 4471£4,180.00 cleared into the current account.Bank
- MonFlight schedule changedSMS
list.tiles
list.stories
list.avatars
calendar.month_strip
August
Tables and numbers
Where the figures go. hero.metric's clock is the one thing the device owns, and it is the one NUMBER a screen is about; the space's face at the top of a page is hero.banner, in Media and identity.
table.simple
| Client | Due | Amount |
|---|---|---|
| Kestrel Ltd | Paid | £4,180.00 |
| Harlow & Co | Fri | £1,250.00 |
| Sandbourne | Overdue 11 days | £640.00 |
stats.row
- Cleared
- £4,180 first this week
- Outstanding
- £1,890 down £4.2k
- Overdue
- 1invoice unchanged
hero.metric
Leave in
1:10:00
9 min later than yesterday18 minutes of bridge traffic already priced in.
Status and states
Empty, loading and broken are content the agent writes, not accidents.
section.header
Invoices
Three open, one overdue.
status.banner
state.empty
Nothing has cleared the bar
No event has cleared the bar since Aug 12, and the week this page names has already passed.
state.loading
Reading last night's mail
state.error
Could not reach the bank
The balance below is from 03:44 and may be stale. The agent will try again on the next wake.
upstream_timeout
state.success
Paid Sandbourne
£640.00
INV-2291 · ref KX8827
Nothing else is overdue. Harlow & Co is next, on Friday.
layout.divider
progress.bar
6 of 9
Containers
Shapes with slots. A container is arrangement; it never carries the message itself.
layout.stack
Stacked, gap md
Children run down the page in `position` order.
- Rescheduled
- Paid
- Needs you
- FYI
layout.row
Cleared
£4,180
Outstanding
£1,890
group.section
Today
Three things, in the order they happen.
card.basic
Invoice 4471
Cleared at 03:44. Nothing is owed and nothing needs you.
- Flight
- BA 1476
- Boarding
- 10:05, gate B12
- Seat
- 14A, windowchanged
- Bag
- Carry-on only
deck.sections
This deck has no sections in it yet.
deck.stories
layout.carousel
Interactive
The shapes a tap can come from. Every tap is a row in the actions queue.
list.checklist
Before you leave
This page is not connected to an account, so decisions cannot be recorded.
action.buttons
action.pill
This page is not connected to an account, so decisions cannot be recorded.
deck.swipe
1 of 2
Re: Thursday's room
Small room is free after 10 if that helps.
This page is not connected to an account, so decisions cannot be recorded.
Media and identity
Pictures, and the painted surfaces a place is recognised by. hero.banner is here; the one number a screen is about is hero.metric, in Tables and numbers.
hero.banner
media.image
Not on this platform
In the vocabulary, no web renderer on this build. The block's fallback is drawn and the miss is reported.
chart.sparkline
161 blocks validated against 42 shapes: no issues.
1 shape without a web renderer on this build: chart.sparkline (fallback drawn). Reported to public.unknown_shapes from the browser when there is a session; logged to the console when there is not.