Docs / Anatomy of a Part
What is inside every folder in the catalog.
A part is a folder: preview.html (the markup, exactly as you copy it), the part’s CSS, a JS file when the part behaves, and meta.json. Examples, when a part has them, live in examples.html and render on the part’s page under the preview. What you see on the site is not a rendering of the part — it is the part, loaded live.
components/button/ preview.html the markup button.css the styles button.js the behavior (when any) examples.html variations (when any) meta.json title, category, usage, accessibility
Blocks are folders too, with one addition: meta.json names the parts they use, and their previews load those parts’ CSS — a block is a composition, never a re-implementation.
Every part reads color, spacing, radius and motion from the tokens and nothing else. Classes follow one grammar. Interactive parts state their keyboard behavior and their no-JavaScript fallback in their metadata, and the part’s page prints both. If two parts disagree about anything, that is a bug in one of them, and the mold decides which.
Status is printed on every part: stable means the contract is settled; beta means the shape is right but the edges are still being filed. The catalog counts both, and labels both.
Getting Started · Theming · Dark Mode · Accessibility · Installation · JavaScript · Guide: Building a Dashboard · Guide: Building a Settings Page · Guide: Building a Pricing Page · Guide: Sign-in & Account Pages · Why Vanilla · The Mold · Coming from Tailwind · FAQ · Changelog