Draft UI

A shadcn/ui-inspired component library for Vue and React, built with pnpm monorepo.

🚀 Features

• Monorepo: Powered by pnpm workspaces.
• Copy-Paste Architecture: Components are imported directly into your project files (no node_modules bloating).
• Multi-Framework: First-class support for both Vue 3 and React.
• CLI Utility: Easy component management with draft-cli.
• shadcn/ui Compatible: Reuses components.json for configuration.
• Documentation: Built-in VitePress docs with interactive examples.

📁 Structure

.
├── apps
│   └── docs          # VitePress documentation
├── packages
│   ├── cli           # CLI tool (draft-cli)
│   ├── react         # React component templates
│   └── vue           # Vue component templates
└── test-app          # Test workspace

🛠️ Getting Started

Installation

pnpm install
pnpm build

Usage

To use the CLI in your project:

# Initialize project
npx draft-cli init

# Add a component (Vue)
npx draft-cli vue add [component]

# Add a component (React)
npx draft-cli react add [component]

Note: draft-cli is the unified entry point for managing components.

📄 Configuration

Draft UI uses a components.json file in your project root to manage paths:

{
  "style": "default",
  "aliases": {
    "components": "@/components",
    "ui": "@/components/ui"
  }
}

💻 Documentation

Online Documentation: https://preflower.github.io/draft-ui/

Run the documentation site locally:

pnpm dev

License

MIT