Skip to Content
Chunks UI

React 19+ Component Library

Build with
intention

Accessible components on Base UI, styled with Tailwind CSS v4, animated with Motion. Composed, not configured.

Foundation

Base UI

Headless, accessible primitives from MUI with built-in Floating UI. WAI-ARIA patterns out of the box.

Tailwind CSS v4

OKLCH color tokens via CSS variables. CVA-powered variant definitions. Zero-config dark mode.

Motion

Spring physics with shared presets. CSS fallbacks when Motion isn't installed. Respects prefers-reduced-motion.

Clean API

Props you already know.
Patterns you already use.

Compound components with Field.Root, Field.Label, Field.Description. Standard HTML attributes forwarded. No wrapper divs, no magic.

Read the docs
LoginForm.tsx
import { Button, Input, Field } from "chunks-ui";

function LoginForm() {
  return (
    <form className="flex flex-col gap-4">
      <Field.Root>
        <Field.Label>Email</Field.Label>
        <Input
          type="email"
          placeholder="you@example.com"
        />
      </Field.Root>

      <Field.Root>
        <Field.Label>Password</Field.Label>
        <Input type="password" />
        <Field.Description>
          Must be at least 8 characters
        </Field.Description>
      </Field.Root>

      <Button color="primary">Sign in</Button>
    </form>
  );
}

Principles

One component, one job

Select, Combobox, Autocomplete — each is its own component. No mode-switching.

Composition over config

Compound patterns: Root, Trigger, Content. Standard props, not config objects.

Lean by default

If Tailwind handles it, we skip it. Ship only what’s genuinely needed.

LLM-friendly API

Conventional patterns, minimal abstractions. Readable by humans and language models alike.

Start building

Add chunks-ui to your project in seconds.

Get Started
Last updated on