vibe-ui-kit

v0.1.35

Published

5 days ago

The official CLI companion for Vibe UI - A premium themed React and Next.js component library featuring 94+ accessible components, WebGL shaders, and application blocks.

Downloads

475

💡 Why Vibe UI?

Most component libraries install into node_modules — you get zero design control and heavy bundle overhead.

Vibe UI is different. Components are installed directly into your source code via the CLI. You own every line, customize freely, and ship only what you use.

⚡ Quick Start

Get up and running in under 2 minutes:

Initialize project layout & theme:
```
npx vibe-ui-kit init
```
Add a component:
```
npx vibe-ui-kit add button
```

💡 Tip: Run npx vibe-ui-kit add without any arguments to open the interactive multi-select picker to choose multiple components.

🚀 Full Setup Guide (A to Z)

Step 1 — Create a React + TypeScript Project

npx create-vite@latest my-vibe-app --template react-ts
cd my-vibe-app
npm install

Step 2 — Install Tailwind CSS v4

npm add -D tailwindcss @tailwindcss/vite

Then add the Tailwind plugin to your vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})

Step 3 — Add Vibe UI Components

Pick individual components:

# Add a single component
npx vibe-ui-kit add button

# Add another
npx vibe-ui-kit add switch

Or use the interactive picker to select multiple:

npx vibe-ui-kit add

The CLI auto-creates src/components/ui/ and the shared utility helper at src/lib/utils.ts.

Step 4 — Install Peer Dependencies

The CLI will instruct you exactly what to install. Common dependencies:

# Core utilities (always needed)
npm add clsx tailwind-merge tailwind-variants @radix-ui/react-slot lucide-react

# Radix primitives (install what your selected components need)
npm add @radix-ui/react-accordion @radix-ui/react-alert-dialog \
  @radix-ui/react-dialog @radix-ui/react-dropdown-menu \
  @radix-ui/react-progress @radix-ui/react-radio-group \
  @radix-ui/react-slider @radix-ui/react-toast \
  @radix-ui/react-hover-card @radix-ui/react-popover \
  @radix-ui/react-scroll-area @radix-ui/react-menubar

Step 5 — Apply the Theme

Replace the contents of src/index.css with the Vibe UI theme variables:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import 'tailwindcss';

@theme {
  --color-background: #09090b;
  --color-foreground: #fafafa;
  --color-card: #09090b;
  --color-card-foreground: #fafafa;
  --color-popover: #09090b;
  --color-popover-foreground: #fafafa;
  --color-primary: #a855f7;
  --color-primary-foreground: #ffffff;
  --color-secondary: #27272a;
  --color-secondary-foreground: #fafafa;
  --color-muted: #18181b;
  --color-muted-foreground: #a1a1aa;
  --color-accent: #27272a;
  --color-accent-foreground: #fafafa;
  --color-destructive: #ef4444;
  --color-destructive-foreground: #fafafa;
  --color-border: #27272a;
  --color-input: #27272a;
  --color-ring: #a855f7;
  --radius: 0.75rem;
}

body {
  background-color: #09090b;
  color: #fafafa;
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
}

📂 Project Structure

After adding components, your project layout will look like this:

my-vibe-app/
├── src/
│   ├── components/
│   │   └── ui/
│   │       ├── button.tsx          ← Vibe UI components
│   │       ├── card.tsx
│   │       ├── dialog.tsx
│   │       ├── table.tsx
│   │       ├── breadcrumb.tsx
│   │       ├── pagination.tsx
│   │       ├── toast.tsx
│   │       ├── calendar.tsx
│   │       ├── carousel.tsx
│   │       ├── switch.tsx
│   │       └── ...  (51 total)
│   ├── lib/
│   │   └── utils.ts                ← Class-merging utility (auto-created)
│   ├── App.tsx
│   └── index.css                   ← Theme config styles
├── vite.config.ts
└── package.json

🧩 Components, Shaders & Application Blocks (94+ Items)

🎛️ Inputs & Controls (13)

📐 Layout & Structure (10)

🪟 Overlays & Dialogs (7)

🔔 Feedback & Status (11)

📊 Data Display & Navigation (10)

🧩 Full Application Blocks (8)

🌌 WebGL Background Shaders (5)

🎨 4 Visual Presets

Every component supports 4 built-in visual themes you can toggle with a single variant prop:

default — Clean, minimal typography layout
glass — Frosted glassmorphism saturation with high backdrop blur
retro — Warm neobrutalism aesthetics with hard shadows and borders
glow — Neon-lit with color shadow glow aura animations

import { Button } from './components/ui/button'
import { Switch } from './components/ui/switch'
import { Card } from './components/ui/card'

export default function Example() {
  return (
    <>
      <Button variant="glow">Neon Button</Button>
      <Switch variant="glass" />
      <Card variant="retro">Retro Card</Card>
    </>
  )
}

🔧 CLI Reference

1. `init` — Project setup

Initialize the workspace theme configuration and utils helper.

npx vibe-ui-kit init [options]

Options:

-y, --yes — Skip interactive prompts and write default config paths (./src/components/ui, ./src/lib/utils.ts, and auto-detected CSS file).

2. `add` — Install components

Add one or more Vibe UI components to your project.

npx vibe-ui-kit add [components...] [options]

Arguments:

components — Component name(s) to add (e.g. button, switch). Omit to open the interactive picker.

Options:

-y, --yes — Skip interactive installation prompts.

❓ Troubleshooting

npx vibe-ui-kit@latest add avatar

// Before
let timer: NodeJS.Timeout

// After
let timer: ReturnType<typeof setTimeout>

// Should match your actual file structure
import { cn } from '../../lib/utils'

🤝 Contributing

Contributions are welcome! Check the GitHub Repository for issues and pull requests.