Matter patterns
Components are the parts. Patterns are how they fit together.
Read this section when you're about to compose a screen and want to see how the same primitive should behave in context. Every pattern documents the components it uses, the layout shape it expects, and the lifecycle moments it covers.
Navigation & surfaces
Tabs
Switch a single surface between related views without changing route.
Sections
Marketing-page rhythm: eyebrow → headline → body → CTA, repeated.
Cards
Generic card composition — for domain cards, see the InlineCard family.
Visual treatment
Bloom art
The four bloom variants — peach, amber, lavender, sage — and when to deploy each.
Blooms (bare)
Bloom backdrop without the BloomArt overlay — used behind dense data surfaces.
Icons
Lucide-as-our-default, when to substitute, sizing and stroke conventions.
Data & input
Tables
Tabular data with sortable headers, sticky-first-column behaviour, empty / loading / error rows.
Search & filters
The Cmd+K palette plus inline filter chips. URL state, no client routing.
API composition
How endpoint pages compose — Endpoint badge, request / response cards, expand-chains.
Warnings
Inline, dismissable, and modal warnings. When each is appropriate.
Dynamic cards (Claude / agent surfaces)
The dynamic-card family powers every Claude-rendered output inside Matter — board consents, filing trackers, equity moments, doc panels, signature flows, lifecycle stages.
Pick the right pattern
Two questions you'll ask in order:
- What lifecycle moment is this? Create / Manage / Exit. Filings and registrations sit in Create; cap-table changes and quarterly compliance live in Manage; M&A and dissolution live in Exit. The pattern catalogue is indexed first by moment.
- What's the right surface? A full sheet, an inline card, a table row, a chat-rendered card. Each pattern is paired with a recommended surface — start from the recommendation and adapt.
Layouts that ship in production
For complete screens (data-corpus, doc-detail, board, equity, API reference) see Recipes — each recipe page diagrams a real screen, lists every component used, and links to the matching source file in apps/app/.