Vibe UI
Initializing Vibe UI System...

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 init

Flags

  • -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 dialog

If run without arguments, the CLI launches an interactive multi-select prompt:

npx vibe-ui-kit@latest add

Flags

  • -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 list

Flags

  • -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 text

info

Inspect detailed metadata for any component, including category, source files, registry dependencies, and required npm packages:

npx vibe-ui-kit@latest info button-group

Output:

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-group

diff

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 button

If 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 doctor

Output:

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 --all

Flags

  • -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).

Contributors

Theme Customizer

8px
@theme { --radius: 0.5rem; --glass-blur: 8px; }
Changes apply instantly to this documentation workspace.