Packages

Package	npm
`@sigil-ui/tokens`	Tokens, CSS variables, Tailwind v4
`@sigil-ui/components`	350+ styled React components
`@sigil-ui/presets`	44 curated preset bundles
`@sigil-ui/primitives`	Headless behavior primitives
`@sigil-ui/cli`	CLI tools
`create-sigil-app`	Project scaffolder

Requirements

React 18+ or 19
Tailwind CSS v4
Node.js 18+

Package manager

# pnpm (recommended)
pnpm add @sigil-ui/tokens @sigil-ui/components

# npm
npm install @sigil-ui/tokens @sigil-ui/components

# yarn
yarn add @sigil-ui/tokens @sigil-ui/components

# bun
bun add @sigil-ui/tokens @sigil-ui/components

Scaffold with the CLI

The fastest way to start is the init command. It creates a token file, wires up CSS imports, and optionally applies a preset.

npx @sigil-ui/cli init

Options:

# Start with a preset
npx @sigil-ui/cli init --preset sigil
npx @sigil-ui/cli init --preset anvil

# Specify output directory
cd apps/web
npx @sigil-ui/cli init

Manual setup

1. Import token CSS

Add the Sigil token stylesheet to your root layout or entry point. This injects all --s-* CSS custom properties.

app/layout.tsx

import "@sigil-ui/tokens/css";

Or if you are using Tailwind v4, import the Tailwind-compatible layer instead:

app/globals.css

@import "tailwindcss";
@import "@sigil-ui/tokens/tailwind";

2. Use components

Every component reads from the CSS variables injected by the token stylesheet. No additional configuration needed.

app/page.tsx

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

export default function Page() {
  return (
    <Stack gap={16} align="center">
      <h1>Welcome</h1>
      <Button variant="primary">Continue</Button>
      <Button variant="ghost">Skip</Button>
    </Stack>
  );
}

3. Customize tokens (optional)

Override any token by redefining CSS variables. You can do this in a global stylesheet or scoped to a container.

app/globals.css

:root {
  --s-primary: oklch(0.55 0.20 145);
  --s-card-radius: 16px;
}

Or switch to a full preset with the CLI:

npx @sigil-ui/cli preset anvil
npx @sigil-ui/cli doctor

Framework guides

Next.js (App Router)

app/layout.tsx

import "@sigil-ui/tokens/css";
import type { ReactNode } from "react";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Vite + React

src/main.tsx

import "@sigil-ui/tokens/css";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Remix

app/root.tsx

import "@sigil-ui/tokens/css";
import { Links, Meta, Outlet, Scripts } from "@remix-run/react";

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <Scripts />
      </body>
    </html>
  );
}

TypeScript

All components ship with full TypeScript definitions. The token types are exported from @sigil-ui/tokens:

import type { SigilTokens, SigilPreset } from "@sigil-ui/tokens";

Installation