Alpha: Ships on npm at 7.0.0-alpha.07.0.0-alpha.0

Bounds and counts

Every string has a maximum length and every list a designed count, and a record over its bound fails to parse.

A bound is the maximum length of a string or the designed count of a list. A record over a bound fails to parse, so it never renders.

A bound is design

Each maximum is the longest instance on the pages the Section types were drawn from, plus about a fifth. A hero title holds 64 characters because the hero was drawn at that length, and a longer title breaks the layout the bound protects.

A refusal

Set the quickstart's hero title to 71 characters and PageSchema.safeParse refuses it:

sections.1.block.title: Too big: expected string to have <=64 characters

The fix is shorter content, never a looser bound. Refusals holds every bound by path.

Designed counts

A list's count is part of its design. Each Section type arranges itself from the count, and every count it holds fills its rows at every width.

ListHolds
nav.linksat most 6 items
footer.columnsat most 4 items
footer.socialat most 6 items
hero.actionsat most 2 items
hero.fineat most 4 items
stats.items3 to 4 items
facts.items1 to 16 items
feature-grid.items2, 3, 4, 6, 8 items
feature-split.itemsexactly 3 items
bento.panels2 to 4 items
steps.moreat most 2 items
steps.steps3 to 5 items
text-stack.items3 to 6 items
terminal.lines1 to 32 items
api-call.examples1 to 4 items
endpoints.rows3 to 16 items
agent-prompt.lines1 to 6 items
pricing.tiers1 to 4 items
plan-table.columns1 to 6 items
plan-table.rows1 to 8 items
faq.items1 to 10 items
faq.groups1 to 4 items
closing.fineat most 4 items
closing.statsat most 4 items
closing.actionsat most 2 items
cta-form.fields1 to 8 items
post-list.posts1 to 24 items
product-head.chipsat most 9 items
product-head.actions1 to 2 items
product-list.sortat most 4 items
product-list.viewsat most 2 items
product-list.rowsat most 50 items

Rules past the bounds

Some refusals depend on more than one field. A nav row holds a budget of units, spent on its links and the wider of its brand and button. A closing ends on buttons or one command, never both. Each rule is on Refusals, with the message safeParse returns.

On this page