Quiet, precise components for React.
63 accessible components in plain CSS and one set of tokens. Hairlines, one cool accent and calm motion — for products that read as engineered, not decorated.
One set of tokens. The whole screen follows.
Accent, radius, density, theme and type scale are custom properties. Change one and the dashboard, form and dialog below all follow, with the exact CSS it takes underneath.
Tokens
Every control sets custom properties on the preview. Nothing else changes.
Attributes: data-theme="light" data-accent="blue" data-density="default"
Defaults. Change a control to see the tokens it sets.
63 components, one contract.
From layout primitives to overlays. Each page has a live preview, props, keyboard map and accessibility notes. Full index
Inputs
Layout
Typography
Data display
Feedback
Overlay
Navigation
Six rules, applied everywhere.
Every component follows the same design contract, so a page built from Merid holds together without a review. Principles
- One accent, used sparinglyA single cool blue carries interaction and selection. Everything else is ink-tinted neutral.
- Surface before borderTrays separate regions first. A hairline is the last resort, never a heavier rule.
- Hairlines onlyEvery border is one pixel. Selection is a 1.5px accent ring. Never two, never dark.
- Hierarchy from toneThree text tones and two weights. Colour is never a crutch for emphasis.
- Quiet interactionTints and a .97 press in 150 to 200 milliseconds. Reduced motion removes all of it.
- Open cascadeEvery rule lives in a named layer, so your styles win without !important.
Foundations
The tokens behind every component, with light and dark values and the reason each one exists.
- ColorOne accent, ink-tinted neutrals, quiet status tones.
- TypographyGeist and Geist Mono, nine sizes, three weights.
- SpacingA 4 and 8 pixel scale up to the section rhythm.
- RadiusCorners that step down as surfaces nest.
- ElevationSoft ink-tinted shadows, a ring in dark mode.
- MotionThree durations and one easing curve.
- Dark modeSystem preference or a data-theme attribute.
- LayoutContainer, gutter, section and reading widths.