Vibe UI
Initializing Vibe UI System...
Vibe UI

Installation & Setup

Choose your preferred framework and toolchain below to get step-by-step setup guidance.

Quick Automated Setup

Using our CLI is the fastest way to add Vibe UI components to any React app. Run npx vibe-ui-kit@latest init to auto-configure paths, dependencies, and Tailwind theme tokens.

Choose Your Framework

Select your project stack for framework-tailored step-by-step installation instructions:

Recommended

Next.js

Full-stack Next.js App Router setup with Tailwind CSS & TypeScript.

Setup guide
Popular

Vite

Fast Single Page Application setup using Vite, React, and `@tailwindcss/vite`.

Setup guide
Custom

Manual Setup

Manually configure CSS tokens, path aliases, and utilities into an existing codebase.

Setup guide

Quick Start Options

Option 1 — Using the CLI (Recommended)

Run the CLI command to initialize Vibe UI configuration inside an existing project:

npx vibe-ui-kit@latest init

The CLI will prompt you for:

  1. Language Preference: TypeScript (.tsx) or JavaScript (.jsx).
  2. Components Location: Default @/components/ui.
  3. CSS File Path: Path to your global Tailwind CSS file.

Option 2 — Adding Components

Add individual components into your project on demand:

npx vibe-ui-kit@latest add button card dialog

Or run npx vibe-ui-kit@latest add without arguments to launch the interactive multi-select menu.

Contributors

JS
Jenish Sabhadiya

Theme Customizer

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