Skip to main content

​
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

​
Required dependencies

Craft UI components require the following peer dependencies:

​
Core dependencies

npm install 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

​
Component dependencies

Base UI components require: 
npm install @base-ui/react class-variance-authority motion lucide-react
Craft UI animated components also require: 
npm install gsap canvas-confetti

​
Configure Tailwind CSS

1

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);
}
2

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>
  )
}
3

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

​
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.

Build docs developers (and LLMs) love

Get started for freeTalk to us