A themeable React design system. Use it or don’t.
I built it for my own projects. 91 components, five themes, every colour pairing audited against WCAG AA — because I’m the one who has to look at it. Set one attribute and everything repaints, including the components you wrote.
bun add @mikenotthepope/substrateuiThe same markup in every theme.
Nothing on the left knows which theme it is in. The map on the right is the only thing that changed — and it is the whole theme, not an excerpt.
Lowercase, no spaces.
Preview deployments
Build every pull request.
import { createTheme, ThemeRegistry } from 'substrateui'
const proof = createTheme({
name: 'proof',
light: { primary: 'oklch(0.520 0.133 232)' },
dark: { primary: 'oklch(0.750 0.115 233)' },
})
// Wrap once — every component below repaints.
<ThemeRegistry themes={[proof]} defaultTheme="proof">
<App />
</ThemeRegistry>A theme sets palette, motion curve and corner radius. Light and dark come with it.
Who it's for
Me, mostly. If you recognise yourself below, help yourself — every claim is checked by the build, not by me.
More than one brand
A theme is a token map, and no component ever learns its name. Adding the sixth palette costs a file, not a refactor — and light and dark come with it.
Accessibility as a requirement
35 colour pairings per theme are checked against WCAG AA on every commit, and a failing ratio fails the build. Base UI handles focus, dismissal and ARIA underneath.
Owning your own stack
MIT, no runtime service, no account. React 18+ and Tailwind v4 are the only hard peers — Next and next-themes are optional, so it is not a Next.js-only system.
What you get, roughly
| Item | Value | Detail |
|---|---|---|
| Components | 91 | atomic Button through organism App Shell |
| Themes | 5 | proof · substrate · lava · tundra · plum |
| Audited pairs | 35 | per theme, light and dark. A failing ratio fails the build. |
| Colour | OKLCH | perceptually uniform ramps, so contrast is computed, not eyeballed |
| Primitives | Base UI | focus management, dismissal and ARIA are handled |
| CSS | Tailwind v4 | @theme inline — no config file |
| Peer deps | react ≥ 18 | tailwindcss ≥ 4 · next and next-themes optional |
| Licence | MIT | fork it, ship it, sell it |
| Support | None | issues welcome, replies not promised |
| Users | 1 | hi |