Meridian
My design system: 82 React components on one set of tokens, copied into apps by a CLI.
The component library this site is built with: 76 interface components and 6 chart pieces, all drawn from one file of colour, shadow and motion tokens, in light and dark. The default palette is warm — cream paper, a honey accent, espresso text. Instead of an npm package it ships a small command-line tool that copies a component, everything it depends on and the tokens into another project.
- Status
- Version 0.1.0, private and not published to npm. It has been quiet since late July 2026; this site is where it is used.
Worth knowing§
- 82 components: 76 for interfaces and 6 chart pieces.
- Muted text was raised from 4.1:1 contrast, which fails WCAG AA for body text, to about 6:1 on the light background and 7:1 on the dark.
How it works§
- 01
Components are copied into a project, not installed. `meridian add` follows a component's imports — sibling components, helpers, hooks — copies every file it reaches along with the tokens, and writes a README with the exact install line, so the copy looks like the showcase with no package to publish.
- 02
It refuses to copy the whole library by accident: components must import each other by folder, and one that imports the master index gets a loud warning instead of quietly pulling in eighty-odd files. A flag rewrites the `@/` imports to relative paths for projects without that alias.
- 03
Re-theming is one file. Every colour, shadow, radius, easing and animation is a CSS variable, light values in `:root` and dark in `.dark`; components may use token classes only, never a raw hex, and dark mode has its own black-based shadows so raised surfaces still read.
- 04
The catalog is generated from the code and checked: COMPONENTS.md is built from each component's comments and exports, and the check fails when it is stale, so the docs people and coding agents read can't drift from the source.
- 05
Reduced motion is handled once: under prefers-reduced-motion the stylesheet cuts every animation and transition to near zero, so the motion rules require every entrance to end visible, never stuck at opacity 0.
Built with§
- Next.js 16, also used in Time Manager, Squash Review, Jarvis for Projects, and Ocr-kb-matcher (KIP)
- React 19, also used in Jarvis for Projects and Ship It Tracker
- TypeScript, also used in Sisyphus, Time Manager, Squash Review, Jarvis for Projects, Ocr-kb-matcher (KIP), and Ship It Tracker
- Tailwind CSS v4, also used in Time Manager, Jarvis for Projects, and Ship It Tracker
- Recharts
- class-variance-authority
- lucide-react
- Node.js, also used in Sisyphus
