Documentation

Installation

Get productive in 30 seconds. Zero configuration required.

Install & Go

One package, zero configuration. Works with any CSS framework:

npm

npm install designers

yarn

yarn add designers

pnpm

pnpm add designers

# 1. Install
npm install designers

# 2. Initialize (optional)
npx designers init

# 3. Start using
import { ds } from 'designers';

That's it!

No complex configuration. No overwhelming options. Just install and start using design tokens.

Smart Setup (Optional)

Our CLI detects your project and sets up everything automatically:

# Zero-config setup
npx designers init

✅ Detected: React + TypeScript + Tailwind
📦 Installing designers...
📁 Creating starter files...
🎨 Design system ready!

Quick start:
import { ds } from 'designers';
const styles = { color: ds.colors.blue[500] };

Zero Configuration

The CLI automatically detects your framework, TypeScript setup, and CSS solution. No questions, no decisions, just works.

Next Steps

After installation, you can start using Designers in your project:

// Start using design tokens immediately
import { ds } from 'designers';

// Use anywhere in your app
const styles = {
  color: ds.colors.blue[600],
  padding: ds.spacing[4],
  borderRadius: ds.radius.lg,
  boxShadow: ds.shadows.md
};

// Works with any CSS framework
<div style={styles}>
  Beautiful, consistent styling!
</div>

// Or with Tailwind (auto-synced)
<div className="text-blue-600 p-4 rounded-lg shadow-md">
  Tailwind with design tokens!
</div>

Requirements

React 18.0.0 or higher

TypeScript 5.0.0 or higher (recommended)

Tailwind CSS 3.0.0 or higher (optional but recommended)