Documentation

Quick Start

Designers is a toolkit for managing and using design tokens in React projects. It helps you keep your UI consistent, type-safe, and easy to theme. This quick start will guide you through setup, usage, and customization.

Prerequisites

  • Node.js 16 or newer
  • A React project (Next.js, Vite, CRA, etc.)

Overview

  1. Install the designers package
  2. Initialize your project for instant configuration
  3. Use design tokens in your codebase
  4. Customize tokens and integrate with Tailwind CSS (optional)
Tip: Designers works with any React project and integrates seamlessly with Tailwind CSS. You can also extend or override tokens as needed.

1. Install Designers

Add the package to your project using your preferred package manager. This gives you access to all core tokens and utilities:

npm install designers
# or
yarn add designers
# or
pnpm add designers

2. Initialize Your Project

Run the CLI to generate a designers.config.json and example files. This step is optional but recommended for best experience:

npx designers init
This will create a designers.config.json file and example usage in your project root. You can edit this file to customize your tokens.

3. Use Design Tokens in Your Components

Import ds and use tokens for consistent, type-safe styling. Here’s a real-world example:

import { ds } from 'designers';

export function ExampleButton() {
  return (
    <button
      style={{
        background: ds.colors.blue[600],
        color: ds.colors.white,
        padding: ds.spacing[3],
        borderRadius: ds.radius.md,
        boxShadow: ds.shadows.sm,
        border: 'none',
        fontWeight: 600,
        cursor: 'pointer',
      }}
    >
      Click Me
    </button>
  );
}
Pro Tip: Designers tokens are fully type-safe and work with any CSS-in-JS, utility framework, or even plain CSS variables.

4. Customizing Tokens

Edit designers.config.json to add or override colors, spacing, radii, and more. After editing, restart your dev server to apply changes.

// designers.config.json
{
  "colors": {
    "brand": {
      "primary": "#1e40af",
      "secondary": "#f59e42"
    }
  },
  "spacing": {
    "xs": "0.25rem",
    "sm": "0.5rem"
  }
}
You can now use ds.colors.brand.primary and ds.spacing.xs in your components.

5. Using with Tailwind CSS

Designers can generate Tailwind-compatible tokens. See the theming docs for setup instructions. Example integration:

// tailwind.config.js
const { designersTailwind } = require('designers/tailwind');

module.exports = {
  theme: {
    extend: designersTailwind(),
  },
};

Troubleshooting & Resources

What's Next?

ConfigurationDesign TokensTheming & TailwindTypeScript Support