Getting Started

Why Sigil UI

Most component libraries scatter design decisions across dozens of files. Change a border radius? Hunt through every component. Update a color? Grep and pray.

Sigil takes the opposite approach.

Your entire design system lives in one DESIGN.md file — 519 tokens across 33 categories. Edit the markdown, run sigil design compile, and every component updates. Colors, spacing, radii, shadows, motion, page composition — all from one source.

How it compares to traditional component libraries

Quick start

# Install the packages
pnpm add @sigil-ui/tokens @sigil-ui/components

# Or scaffold a new project
npx @sigil-ui/cli init

Import the token CSS and start building:

import "@sigil-ui/tokens/css";
import { Button } from "@sigil-ui/components";

export default function App() {
  return <Button variant="primary">Get started</Button>;
}

Token architecture

Sigil uses a three-layer token system:

1. Primitive — raw values like oklch(0.65 0.15 280) or 8px
2. Semantic — purpose-driven aliases like --s-primary or --s-radius-md
3. Component — scoped tokens like --s-card-radius consumed by individual components

Every layer compiles to CSS custom properties with the --s- prefix. Components only read variables — they never hardcode values.

/* Your token file controls everything */
:root {
  --s-primary: oklch(0.65 0.15 280);
  --s-radius-md: 8px;
  --s-shadow-md: 0 0 0 1px rgb(0 0 0 / 0.06), ...;
}

Packages on npm

Next steps

• Installation — detailed setup for Next.js, Vite, and Remix
• Theming — create and share presets
• CLI Reference — all available commands
• Modal — expanded overlay component docs
• MultiSelect — advanced input component docs
• Button — your first component