v0.1.0First public release
Quiet, precise components for React.
46 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.
- Components
- 46
- Stylesheets
- 1
- Cascade layers
- 3
- License
- MIT
Change a token, not a component.
Theme, accent and density are custom properties. Flip them and every control below follows — this is the real library, not a screenshot.
northwind-web
stage.html
<div
data-theme="light"
data-accent="blue"
data-density="default"
>
…
</div>Three attributes on any element. They nest, need no provider and add no runtime styles.
46 components, one contract.
From layout primitives to overlays. Each page has a live preview, props, keyboard map and accessibility notes. Full index
Inputs12
Layout06
Typography05
Data display06
Feedback05
Overlay07
Navigation05
Six rules, applied everywhere.
Every component follows the same design contract, so a page built from Merid holds together without a review. Principles
- 01One accent, used sparinglyA single cool blue carries interaction and selection. Everything else is ink-tinted neutral.
--mrd-accent - 02Surface before borderTrays separate regions first. A hairline is the last resort, never a heavier rule.
--mrd-tray - 03Hairlines onlyEvery border is one pixel. Selection is a 1.5px accent ring. Never two, never dark.
1px --mrd-line - 04Hierarchy from toneThree text tones and two weights. Colour is never a crutch for emphasis.
ink · body · muted - 05Quiet interactionTints and a .97 press in 150 to 200 milliseconds. Reduced motion removes all of it.
--mrd-duration - 06Open cascadeEvery rule lives in a named layer, so your styles win without !important.
@layer merid.*
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.
--mrd-accent - TypographyGeist and Geist Mono, nine sizes, three weights.
--mrd-text-* - SpacingA 4 and 8 pixel scale up to the section rhythm.
--mrd-space-* - RadiusCorners that step down as surfaces nest.
--mrd-radius-* - ElevationSoft ink-tinted shadows, a ring in dark mode.
--mrd-shadow-* - MotionThree durations and one easing curve.
--mrd-ease - Dark modeSystem preference or a data-theme attribute.
data-theme - LayoutContainer, gutter, section and reading widths.
--mrd-container
- FoundationsColour, type, spacing, radius, elevation and motion tokens with light and dark values.
- Components46 accessible components, from layout primitives to Select, Tabs, Table and Toast.
- OverlaysDialog, Drawer, AlertDialog, Popover and DropdownMenu with focus management.
- AccessibilityAA-contrast tokens and WAI-ARIA keyboard patterns for every interactive part.
- StylingOne stylesheet, three cascade layers, no runtime CSS-in-JS and no build plugin.