Installation

Get started with ArupUI in your project.

1. Initialize your project

Run the init command to set up ArupUI in your project. This creates a configuration file and installs base dependencies.

npx arupui init

2. Add components

Add individual components to your project:

npx arupui add button

You can add multiple components at once:

npx arupui add button card dialog input

3. Use in your code

import { Button } from "@/components/ui/button"

export default function Page() {
  return <Button variant="outline">Click me</Button>
}

Manual Installation

Prefer to copy code manually? Every component page includes the full source code with a copy button. Just paste it into your project.

Step 1: Install base dependencies:

npm install clsx tailwind-merge class-variance-authority

Step 2: Create a cn utility function at lib/utils.ts:

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

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

Step 3: Copy component code from the docs (each page has a "Manual Installation" section with the full source).

Step 4: Install any component-specific dependencies listed on the page.

Theme Editor

Theme

Radius0.5rem
Letter Spacing0em

Colors

light