Introduction

Merid is a React component library for products that should feel calm and trustworthy. It ships accessible components, one plain-CSS stylesheet and a compact set of design tokens.

Why Merid

The name comes from meridian: a thin, precise reference line. That is the whole visual idea. Borders are 1px hairlines, a single cool blue marks what you can interact with, soft grey trays separate regions, and motion is short and quiet. Nothing on the screen competes for attention with your content.

Merid is deliberately small. It favours a handful of well-specified components over a long catalogue, and a strict design contract over configuration.

What you get

• Components that follow the WAI-ARIA Authoring Practices, with full keyboard support and visible focus.
• Plain CSS in three named cascade layers. There is no runtime styling engine, no build plugin and no class-name generation.
• Design tokens as CSS custom properties with a --mrd- prefix, in light and dark values.
• Server-component friendly exports: static components render on the server, interactive ones are marked as client components.

What Merid is not

Merid is not a theming engine. You can change the accent, the font stack and every token, but the library will not generate new palettes or variant systems for you. It is also not a layout framework: it gives you a container width, a spacing scale and breakpoints, and leaves page composition to you.

Where to go next

• Installation covers npm, Next.js and Vite.
• Usage shows the first component on screen.
• Foundations explains every token and why it exists.
• Principles is the design contract the components are held to.