v0.1 — early access

SubstrateUI

A chunky, opinionated design system for Next.js. OKLCH color tokens, Tailwind CSS v4, Radix UI primitives, and a personality that isn't afraid of borders.

Create Project

Spin up a new project in one click.

Project Name

This will be your repository name.

Next.js

TypeScript

Tailwind

Built Different

Every decision is intentional. Every token is earned.

Chunky Borders

border-2 everywhere. Intentional, tactile, unapologetic.

OKLCH Color System

Perceptually uniform. CVD-safe plum + amber pairing.

Tailwind CSS v4 Native

@theme inline, no config file, CSS-first tokens.

Dark Mode as Token Swap

Flip .dark and the whole system follows. Zero component changes.

70+ Components

From atomic Button to organism App Shell. Batteries included.

Composition Over Configuration

Field context, sub-component patterns, slot-based APIs.

Quick Start

Three imports and you're in.

globals.css

@import "tailwindcss";
@import "tw-animate-css";
@import "substrateui/styles.css";
@source "../node_modules/substrateui";

app.tsx

import { Button, Stack, Field, FieldLabel, Input } from 'substrateui'

export default function App() {
  return (
    <Stack gap="md">
      <Field>
        <FieldLabel>Email</FieldLabel>
        <Input type="email" placeholder="you@example.com" />
      </Field>
      <Button variant="amber">Subscribe</Button>
    </Stack>
  )
}