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
cnutility 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
| Flag | Description |
|---|---|
-o, --overwrite | Overwrite existing files |
-y, --yes | Skip 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
- Fetches component definitions from the ArupUI registry
- Resolves any registry dependencies (e.g., a
commandcomponent that depends ondialog) - Transforms internal imports to match your configured aliases
- Writes component files to the appropriate directory
- 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.