create-ds-lib

A modern CLI to scaffold production-ready React design systems in seconds.

create-ds-lib helps you quickly bootstrap a fully-configured design system library with best practices, modern tooling, and your choice of popular frameworks.

Quick Start

npx create-ds-lib

Or with a project name:

npx create-ds-lib my-design-system

The CLI will guide you through an interactive setup process and generate a complete, ready-to-use design system.

What You Get

A production-ready design system with:

• ⚛️ React 19 - Latest React with all modern features
• 📦 Your Choice of Bundler - Vite 6, Webpack 5, or Rollup 4
• 🎨 Styling Options - Tailwind CSS v4, Material UI v7, or vanilla CSS
• 📚 Storybook 8 - Component documentation and development environment
• 🧪 Testing Setup (optional) - Vitest 2 + React Testing Library
• 📘 TypeScript (optional) - Full type safety
• 🏗️ Architecture - Atomic Design or flat component structure
• ✨ Code Quality (optional) - ESLint 9 + Prettier
• 🔧 Pre-configured - .gitignore, .npmignore, and all tooling configs included
• 📄 Complete Documentation - Generated README with usage examples

Supported Technologies

Frameworks & Libraries

• React: 19.x
• TypeScript: 5.7+ (optional)

Bundlers

• Vite: 6.x (recommended)
• Webpack: 5.x
• Rollup: 4.x

UI Libraries

• shadcn/ui with Tailwind CSS v4
• Material UI v7 with Emotion
• Vanilla CSS with CSS variables

Development Tools

• Storybook: 8.6.x (always included)
• Vitest: 2.x with React Testing Library (optional)
• ESLint: 9.x (optional)
• Prettier: 3.x (optional)

Usage

Installation

The easiest way to use create-ds-lib is with npx:

npx create-ds-lib

Alternatively, install globally:

npm install -g create-ds-lib
create-ds-lib

Interactive Setup

The CLI will ask you a few questions:

1. Project name - Name for your design system
2. Description - Brief description of your library
3. TypeScript - Enable TypeScript support?
4. UI Library - Choose shadcn/ui, Material UI, or vanilla CSS
5. Bundler - Select Vite, Webpack, or Rollup
6. Architecture - Atomic Design or flat structure
7. Testing - Include Vitest and React Testing Library?
8. ESLint - Add ESLint configuration?
9. Prettier - Add Prettier configuration?

After answering, the CLI will:

• Generate all project files
• Install dependencies automatically
• Create a complete README with instructions

Development Workflow

Once generated, start developing:

cd my-design-system
npm run storybook    # Start Storybook on http://localhost:6006

Build your library:

npm run build       # Build for production

Run tests (if configured):

npm run test        # Run tests once
npm run test:watch  # Run tests in watch mode

Project Structure

Your generated design system will have:

my-design-system/
├── src/
│   ├── components/       # Your components
│   │   └── Button/       # Example button component
│   └── index.tsx         # Main entry point
├── .storybook/           # Storybook configuration
├── dist/                 # Built files (after npm run build)
├── .gitignore            # Pre-configured git ignore rules
├── package.json
├── vite.config.ts        # Bundler config (varies by choice)
└── README.md             # Generated documentation

Architecture Options

Atomic Design (recommended for large systems):

components/
├── atoms/          # Basic building blocks
├── molecules/      # Simple combinations
└── organisms/      # Complex components

Flat Structure (simpler for small libraries):

components/
├── Button.tsx
├── Input.tsx
└── Card.tsx

Features in Detail

Tailwind CSS v4

Projects using shadcn/ui get Tailwind v4 with CSS-based configuration. No tailwind.config.js needed - configure everything in your CSS using the @theme directive.

Storybook Integration

Every generated project includes Storybook 8 for:

• Component development and testing
• Interactive documentation
• Visual regression testing
• Shareable component library

TypeScript Support

Optional TypeScript configuration with:

• Strict mode enabled
• React types included
• Build-time type checking

Testing Setup

Optional Vitest configuration with:

• Fast test execution
• React Testing Library integration
• Example test files
• Watch mode support

Pre-configured Files

Every project includes essential configuration files:

• .gitignore - Excludes node_modules, dist, coverage, .env files, and more
• .npmignore - Ensures only necessary files are published to npm
• All bundler configurations (Vite/Webpack/Rollup)
• TypeScript configs (if enabled)
• ESLint and Prettier configs (if enabled)

Requirements

• Node.js: 18.x or higher
• npm: 9.x or higher

Development & Testing

For contributors and developers working on the CLI itself:

Testing Scripts

We provide automated testing tools to verify all configuration combinations:

• ./test-quick.sh - Quick smoke test (~30 seconds)

  • Validates project generation without building
  • Perfect for rapid iteration during development

• ./test-combinations.sh - Full integration test (~15-30 min)

  • Tests 9 common configurations
  • Runs builds, lints, and tests for each
  • Use before releasing new versions

• ./test-interactive.sh - Manual testing helper

  • Interactive prompts to select specific configuration
  • Great for debugging edge cases

• ./test-watch.sh - Auto-test on file changes

  • Watches for changes and auto-runs quick tests
  • Requires fswatch (macOS) or inotifywait (Linux)

See TESTING.md for detailed documentation.

Quick Start for Contributors

# Clone the repo
git clone [email protected]:netanelvaknin/create-ds-lib.git
cd create-ds-lib

# Install dependencies
npm install

# Build the CLI
npm run build

# Run quick test
./test-quick.sh

# Or test interactively
./test-interactive.sh

Made with ❤️ for the React community