Documentation
The design system developers love
Zero-config design tokens, unstyled components, and powerful integrations. Get productive in 30 seconds, not 30 minutes. Works with any CSS framework.
Quick Start
Get up and running in minutes with our simple installation guide.
Components
Explore our comprehensive component library and APIs.
Features
Zero Configuration
Works out of the box with smart defaults. No complex setup required.
TypeScript Native
Full TypeScript support with amazing autocomplete and type safety.
Framework Agnostic
Works with Tailwind, CSS-in-JS, styled-components, or plain CSS.
Powerful Integrations
Auto-sync with Tailwind, VS Code IntelliSense, and Figma tokens.
Unstyled Components
Accessible components with behavior, you provide the styling.
Developer Experience
Built by developers, for developers. Saves time, not adds complexity.
Get Started in 30 Seconds
No complex configuration. No overwhelming options. Just install and go:
# Get started in 30 seconds
npm install designers
# Initialize your project
npx designers init
# Start using design tokens immediately
import { ds } from 'designers';Use Anywhere
Design tokens that work with any CSS solution:
import { ds } from 'designers';
// Use design tokens anywhere
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>Smart Setup
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] };