The complete frontend building-block library
A frontend system from which many products can be built.
Foundry is four levels of composition — primitives, navigation and forms, sections and patterns, complete products — assembled from one token system and documented against their own source.
Catalogue size
Four levels of composition
Each level is assembled from the one below it.
Nothing at a higher level re-implements something from a lower one. That constraint is what keeps 240 catalogued items coherent instead of merely numerous.
- Level 145 items
Primitives
Buttons, inputs, overlays, feedback and data display — each with real states, a keyboard contract and documented accessibility behaviour.
Explore - Level 238 items
Navigation and forms
Navbars, headers, footers and application shells, plus twenty-eight validated form flows sharing one validation engine.
Explore - Level 3109 items
Sections and patterns
Full-width blocks that compose into pages, and ten finished page compositions assembled entirely from them.
Explore - Level 410 items
Starter products
Ten multi-route products with working navigation, real 404 paths and no duplicated code between them.
Explore
Start here
Six items that show what the rest of the catalogue is like.
Button
The complete action surface: nine variants, five sizes, and a loading state that preserves the control’s measured width.
starterFeatured7 variantsField
The accessibility contract shared by every form control — label, help text, error, success and the ARIA wiring that connects them.
intermediateFeatured7 variantsCombobox
A filterable single-select implementing the ARIA 1.2 combobox pattern, with active-descendant browsing that never moves focus out of the input.
advancedFeatured5 variantsAlert
A block-level message attached to a region, with tone-appropriate live-region politeness.
starterFeatured6 variantsToast
Transient notifications in a single polite live region, with pinned errors and an optional undo action.
intermediateFeatured6 variantsCard
A discrete record in a collection, with five tones and a composable header, title, description and footer.
starterFeatured6 variants
- Tokens first, components second
- Colour, type, spacing, radius, shadow, motion and density are decided once. Components are downstream of them, which is why a whole rebrand touches one file.
- Documentation generated from source
- A build step reads the real component files and generates the source registry. The code you copy is the code that renders the preview, and a test fails if the two ever diverge.
- Accessibility in the primitive
- Focus trapping and return, live regions, manual tab activation and colour-independent status live inside the components — not on a review checklist.
- Server-first by default
- Sections are Server Components. Only overlays, menus and the command palette hydrate, so a page assembled from nine sections ships almost no JavaScript.
Ten complete products, from the same catalogue.
109 concrete routes across ten starters, generated from 10 route tables. Every navigation link resolves, and every starter has its own 404 path.