Installation

One-Liner (Zero Config)

npx ds0 init -y

That's it. The CLI auto-detects your framework, package manager, and file structure. Everything is set up for you.

What just happened?

1. ✅ Detected your framework (Next.js, Vite, Remix, Astro, Gatsby, CRA)
2. ✅ Installed @ds0/primitives, @ds0/tokens, and Tailwind utilities
3. ✅ Created ds0.config.json
4. ✅ Added the DS0 Tailwind preset
5. ✅ Created the cn() utility
6. ✅ Set up your components directory

Next → Add your first component

Using a specific framework? See Framework Guides for framework-specific details.

Adding to an existing project? See Existing Projects for conflict-free integration.

Coming from Bootstrap, MUI, or Chakra? See the Migration Guide.

Only need tokens or one component? See Cherry-Picking.

Interactive Mode

Want to customize paths? Drop the -y flag:

npx ds0 init

The CLI will ask where to put components, your CSS file, and your utility path — all with smart defaults for your framework.

Manual Setup

If you prefer to set things up by hand:

1. Install packages

pnpm add @ds0/primitives @ds0/tokens
pnpm add -D tailwindcss clsx tailwind-merge class-variance-authority

2. Configure Tailwind

// tailwind.config.ts
import ds0Preset from '@ds0/tokens/tailwind';

export default {
  presets: [ds0Preset],
  content: [
    './app/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
  ],
};

3. Import token CSS

/* globals.css */
@import '@ds0/tokens/css';

4. Create utility

// lib/utils.ts
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]): string {
  return twMerge(clsx(inputs));
}

5. Add components

npx ds0 add button
npx ds0 add dialog
npx ds0 add text-field

Requirements

Don't use React? DS0 ships Web Components that work in any HTML page — no framework needed.