Auto-generate your docs

Installation

Get started with Craft UI by installing the necessary packages and configuring your project.

Prerequisites

Before installing Craft UI, make sure you have the following:

Node.js 18.0 or later
React 19.0 or later
React DOM 19.0 or later

Understanding the monorepo structure

Craft UI is organized as a monorepo with workspace packages. The project contains:

@craftdotui/baseui - Base UI components
@craftdotui/craftui - Craft UI animated components
@craftdotui/loaders - Loading spinners and animations
@craftdotui/hooks - Utility hooks
@craftdotui/lib - Shared utilities

Craft UI uses a registry-based installation system. Instead of installing packages via npm, you copy components directly into your project. This gives you full control over the code and makes customization easier.

Installation methods

CLI (Recommended)
Manual

The easiest way to add Craft UI components to your project is using the CLI:

npx craftui-cli add button

yarn dlx craftui-cli add button

pnpm dlx craftui-cli add button

bunx craftui-cli add button

This will:

Copy the component code into your project
Install required dependencies
Set up necessary configuration

You can also manually copy component code from the GitHub repository:

Browse to the component you want in the repository
Copy the component code
Create a new file in your project (e.g., components/ui/button.tsx)
Paste the code and install dependencies

Required dependencies

Craft UI components require the following peer dependencies:

Core dependencies

npm install react@^19.0.0 react-dom@^19.0.0

yarn add react@^19.0.0 react-dom@^19.0.0

pnpm add react@^19.0.0 react-dom@^19.0.0

bun add react@^19.0.0 react-dom@^19.0.0

Styling dependencies

Install Tailwind CSS v4 and related packages:

npm install tailwindcss@^4.0.0 @tailwindcss/postcss tailwindcss-animate

yarn add tailwindcss@^4.0.0 @tailwindcss/postcss tailwindcss-animate

pnpm add tailwindcss@^4.0.0 @tailwindcss/postcss tailwindcss-animate

bun add tailwindcss@^4.0.0 @tailwindcss/postcss tailwindcss-animate

Component dependencies

Base UI components require:

npm install @base-ui/react class-variance-authority motion lucide-react

yarn add @base-ui/react class-variance-authority motion lucide-react

pnpm add @base-ui/react class-variance-authority motion lucide-react

bun add @base-ui/react class-variance-authority motion lucide-react

Craft UI animated components also require:

npm install gsap canvas-confetti

yarn add gsap canvas-confetti

pnpm add gsap canvas-confetti

bun add gsap canvas-confetti

Configure Tailwind CSS

Create your CSS file

Create a globals.css file (or similar) with the following content:

globals.css

@import "tailwindcss";

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background;
    color: var(--foreground);
  }
}

:root {
  --background: oklch(0.99 0 0);
  --foreground: oklch(0 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0 0 0);
  --primary: oklch(0 0 0);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.94 0 0);
  --secondary-foreground: oklch(0 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.44 0 0);
  --accent: oklch(0.94 0 0);
  --accent-foreground: oklch(0 0 0);
  --destructive: oklch(0.63 0.19 23.03);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.92 0 0);
  --input: oklch(0.94 0 0);
  --ring: oklch(0 0 0);
  --radius: 0.5rem;
}

.dark {
  --background: oklch(0 0 0);
  --foreground: oklch(1 0 0);
  --card: oklch(0.14 0 0);
  --card-foreground: oklch(1 0 0);
  --primary: oklch(1 0 0);
  --primary-foreground: oklch(0 0 0);
  --secondary: oklch(0.25 0 0);
  --secondary-foreground: oklch(1 0 0);
  --muted: oklch(0.23 0 0);
  --muted-foreground: oklch(0.72 0 0);
  --accent: oklch(0.32 0 0);
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.69 0.2 23.91);
  --destructive-foreground: oklch(0 0 0);
  --border: oklch(0.26 0 0);
  --input: oklch(0.32 0 0);
  --ring: oklch(0.72 0 0);
}

Import the CSS file

Import your CSS file in your root layout or _app.tsx:

app/layout.tsx

import './globals.css'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Configure PostCSS

Create a postcss.config.js file:

postcss.config.js

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

Set up utilities

Create a utility file for the cn helper function:

lib/utils.ts

import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Install the required packages:

npm install clsx tailwind-merge

yarn add clsx tailwind-merge

pnpm add clsx tailwind-merge

bun add clsx tailwind-merge

TypeScript configuration

Make sure your tsconfig.json includes path aliases:

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Next steps

You’re all set! Now you can:

Quickstart guide

Build your first component

Browse components

Explore all available components

Make sure you’re using React 19+ as Craft UI components rely on the latest React features.

⌘I

Get Started

Base UI Components

Craft UI Components

Loaders

Hooks

Guides

Installation

Installation

Prerequisites

Understanding the monorepo structure

Installation methods

Required dependencies

Core dependencies

Styling dependencies

Component dependencies

Configure Tailwind CSS

Set up utilities

TypeScript configuration

Next steps

Quickstart guide

Browse components

​Installation

​Prerequisites

​Understanding the monorepo structure

​Installation methods

​Required dependencies

​Core dependencies

​Styling dependencies

​Component dependencies

​Configure Tailwind CSS

​Set up utilities

​TypeScript configuration

​Next steps

Quickstart guide

Browse components

Installation

Prerequisites

Understanding the monorepo structure

Installation methods

Required dependencies

Core dependencies

Styling dependencies

Component dependencies

Configure Tailwind CSS

Set up utilities

TypeScript configuration

Next steps