Build with it
Blocks
A Block is one section of a page, assembled from public components. Blocks are source you read and copy, not package exports — so each one names the exports it uses and the data you have to supply.
Personal-site sections — a profile hero, a career timeline, publications, a reading shelf, /now — are documented with the components they are made of, and composed end to end in Experiences.
Filter
Blocks are grouped by the kind of page they belong to: marketing, personal, product.
Every Block in the gallery, in reading order.
Marketing
Sections that make a claim and ask for one action.
Hero banner
5 exportsOne claim, one supporting paragraph and exactly one primary action.
Ship the interface, not the design review
A section that states one claim, proves it in the subhead and offers exactly one next step.
BadgeHeadingTextInlinebuttonVariantsYou supply: Your own headline, subhead and destination for the two links.
Feature grid
4 exportsThree short statements with their explanations, at a readable measure.
Tokens first
Every value is a named role, in both themes.
Keyboard honest
Focus, roving tabindex and announcements ship with the primitive.
Server safe
No component reaches for the window during render.
GridStackHeadingTextYou supply: A list of { title, body } pairs.
Pricing band
8 exportsTwo tiers side by side, with the unavailable one saying so instead of pretending.
Community
Everything in this documentation.
Free
Team
Not built, not sold, not promised.
Soon
GridCardCardHeaderCardTitleCardDescriptionCardContentHeadingButtonYou supply: Your pricing model — or, as here, an honest statement that it does not exist yet.
Product
Sections that read as a working tool rather than a brochure.
Stats strip
2 exportsThree numbers with their direction, sized so the value dominates the label.
GridStatCardYou supply: Numeric values: a formatted string is not a number the component can align.
Metric band
3 exportsA row of metrics using the numeric formatter, so units and separators stay consistent.
InlineMetricMetricValueYou supply: A number and a format kind (`number`, `percent`, `currency`, `compact`).
Console section header
3 exportsA titled section with one action — what most console pages need instead of a toolbar.
Deployments
A section header with one action, which is all most console pages need.
SectionInlineButtonYou supply: A title, a description and the actions your page actually has.