CLI

The ArupUI CLI lets you initialize your project and add components directly from the registry.

init

Set up ArupUI in your project. Creates an arupui.json config file and a cn utility function.

npx arupui init

You'll be prompted to configure:

  • Components directory — where components are placed (default: @/components)
  • Utils directory — where the cn utility lives (default: @/lib/utils)
  • Global CSS file — your Tailwind CSS entry point (default: app/globals.css)

add

Add components from the registry to your project.

npx arupui add [components...]

Options

FlagDescription
-o, --overwriteOverwrite existing files
-y, --yesSkip confirmation prompt

Examples

Add a single component:

npx arupui add spotlight-card

Add multiple components at once:

npx arupui add spotlight-card shimmer-button retro-grid

Overwrite existing files without confirmation:

npx arupui add spotlight-card -o -y

How it works

  1. Fetches component definitions from the ArupUI registry
  2. Resolves any registry dependencies (e.g., a command component that depends on dialog)
  3. Transforms internal imports to match your configured aliases
  4. Writes component files to the appropriate directory
  5. Auto-installs npm dependencies using your detected package manager (pnpm, yarn, bun, or npm)

Configuration

The init command creates an arupui.json file in your project root:

{
  "$schema": "https://arupui.dev/schema.json",
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css"
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "hooks": "@/hooks",
    "blocks": "@/components/blocks"
  }
}

Components, hooks, and blocks are placed in directories based on your alias configuration.

Theme Editor

Theme

Radius0.5rem
Letter Spacing0em

Colors

light