CLI Reference
Use the vibe-ui-kit CLI to quickly initialize themes, scaffold utilities, list registry items, and add components directly into your project.
Zero Configuration
The CLI automatically detects your package manager (pnpm, npm, yarn, or bun), project language (TypeScript or JavaScript), and framework directory structure (src/ vs root).
Commands
init
Initialize Vibe UI configurations, stylesheet themes, and workspace paths in your project:
npx vibe-ui-kit@latest initFlags
-y, --yes: Skip confirmation prompts and use default detected paths (@/components/ui,@/lib/utils, theme CSS).
add
Add individual or multiple components to your project on demand. The CLI automatically resolves and installs subcomponent dependencies (for instance, adding button-group will also install button).
npx vibe-ui-kit@latest add button card dialogIf run without arguments, the CLI launches an interactive multi-select prompt:
npx vibe-ui-kit@latest addFlags
-y, --yes: Skip interactive confirmation prompts and install using detected defaults.-o, --overwrite: Overwrite existing local component files with the latest registry code.-a, --all: Install all 92 components, animations, backgrounds, and blocks at once.
list
Explore all available components, animations, canvas backgrounds, and template blocks directly in your terminal:
npx vibe-ui-kit@latest listFlags
-c, --category <category>: Filter components by category (components,animations,backgrounds,blocks).-s, --search <term>: Search components by name, dependency, or keyword.
# Filter only canvas backgrounds
npx vibe-ui-kit@latest list --category backgrounds
# Search for animation components
npx vibe-ui-kit@latest list --search textinfo
Inspect detailed metadata for any component, including category, source files, registry dependencies, and required npm packages:
npx vibe-ui-kit@latest info button-groupOutput:
button-group
Category: components
Files: button-group.tsx
Registry Dependencies: button
NPM Dependencies: tailwind-variants, clsx, tailwind-merge
Installation:
npx vibe-ui-kit add button-groupdiff
Compare your local component implementation against the official remote registry version:
# Diff all installed components
npx vibe-ui-kit@latest diff
# Diff a specific component
npx vibe-ui-kit@latest diff buttonIf differences are detected, you can view a line-by-line diff or choose to update your local component.
doctor
Run automated project diagnostics to inspect your Node environment, package manager, Tailwind CSS version, CSS directives, and required peer dependencies:
npx vibe-ui-kit@latest doctorOutput:
Running Vibe UI Project Diagnostics...
✓ Node.js runtime (v20.10.0) is compatible (>= 18 required)
✓ Package manager detected: pnpm
✓ components.json found and component path verified (./src/components/ui)
✓ Tailwind CSS v4 detected
✓ Tailwind v4 directives correctly configured in src/app/globals.css
✓ All core utility dependencies present (clsx, tailwind-merge, tailwind-variants, lucide-react)
✓ Found 14 installed component(s) in src/components/ui
Diagnostics Result: Healthy (5/5 checks passed)
Your project is perfectly configured for Vibe UI components!update
Batch update installed components to their latest upstream registry versions with interactive multi-select or one-click --all:
# Interactively select which outdated components to upgrade
npx vibe-ui-kit@latest update
# Update specific components directly
npx vibe-ui-kit@latest update button card dialog
# Upgrade all installed components without prompts
npx vibe-ui-kit@latest update --allFlags
-a, --all: Update all installed components without interactive confirmation.-y, --yes: Skip confirmation prompts and automatically install newly introduced dependencies.
components.json Configuration
When npx vibe-ui-kit init runs, it creates or updates components.json in your project root:
{
"language": "typescript",
"paths": {
"components": "./src/components/ui",
"utils": "./src/lib/utils.ts",
"css": "./src/app/globals.css"
}
}The CLI also natively honors standard shadcn components.json alias schemas (aliases.components, aliases.ui, aliases.utils, and tailwind.css).