Skip to content
Drivn logoDrivn

Installation

How to install and configure Drivn in your project.

Create your project

Scaffolds your project with component directory, cn() utility, color tokens, and configuration.

npx drivn@latest create
  • Detects framework (Next.js or React) and TypeScript
  • Creates src/components/ui/ and src/utils/cn.ts
  • Generates globals.css with base color tokens
  • Installs clsx, tailwind-merge, lucide-react
  • Creates drivn.config.json

Add components

Source code is copied directly into your project — you own it.

npx drivn add button

Add multiple

Pass multiple component names in one command.

npx drivn add button card input dialog
Drivn Feature

Smart Dependencies

Components that depend on others are installed automatically.

1npx drivn add dialog
2​
3# Output:
4# Required dependency: button
5# button → src/components/ui/button.tsx
6# dialog → src/components/ui/dialog.tsx

Add dark/light theme

Theming is optional. Add dark/light theme support when you need it.

npx drivn add theme

Appends theme tokens to your globals, creates a ThemeProvider component, and installs next-themes. See the Theming page for setup steps.

Manual Installation

Each component's docs page includes a Manual tab with the full source code. Copy it into your project and install the required dependencies.