{"_id":"vibe-ui-kit","_rev":"32-e3ead289febd02d2f9d4d74ce87c4327","name":"vibe-ui-kit","dist-tags":{"latest":"0.1.35"},"versions":{"0.1.0":{"name":"vibe-ui-kit","version":"0.1.0","_id":"vibe-ui-kit@0.1.0","maintainers":[{"name":"jenish_sabhadiya","email":"jenish.coderkube@gmail.com"}],"bin":{"vibe-ui":"dist/index.js"},"dist":{"shasum":"0884ccf6d4e4f7f496c2ea9389cc7c7c00bfa023","tarball":"https://registry.npmjs.org/vibe-ui-kit/-/vibe-ui-kit-0.1.0.tgz","fileCount":3,"integrity":"sha512-F93EOk4PDT1I+a679ySTE2MYbQiJC8wT7YeaFUMsM+KsMY3vjOcBZpVcTmRjhlc5EjVzWENaX2Gxjn+of1F0XA==","signatures":[{"sig":"MEYCIQCHcU1Zc7u+UkODRY8XXVCa8pwskMVeo2b07+3oG2Vc3AIhAPdX0lt6Y+oO5WbAPpILJRse4VdazSuPxRhuvF5An5Wq","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9240},"main":"./dist/index.js","type":"module","gitHead":"1352324b37572fe42eeed6cc55413b4c1522c016","scripts":{"dev":"tsc --watch","lint":"eslint .","build":"tsc"},"_npmUser":{"name":"jenish_sabhadiya","email":"jenish.coderkube@gmail.com"},"_npmVersion":"11.18.0","description":"> The official command-line interface to add Vibe UI components directly to your project workspaces.","directories":{},"_nodeVersion":"24.18.0","dependencies":{"prompts":"^2.4.2","fs-extra":"^11.2.0","commander":"^12.0.0"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.4.5","@types/prompts":"^2.4.9","@types/fs-extra":"^11.0.4"},"_npmOperationalInternal":{"tmp":"tmp/vibe-ui-kit_0.1.0_1784121077992_0.3516825102003236","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"vibe-ui-kit","version":"0.1.1","_id":"vibe-ui-kit@0.1.1","maintainers":[{"name":"jenish_sabhadiya","email":"jenish.coderkube@gmail.com"}],"bin":{"vibe-ui":"dist/index.js"},"dist":{"shasum":"5b2beccf34cf959cd89dca827989a6a36c99ba76","tarball":"https://registry.npmjs.org/vibe-ui-kit/-/vibe-ui-kit-0.1.1.tgz","fileCount":3,"integrity":"sha512-iCFTlACO+L2gmzf/h6H/dvTMYIB5tnyoAipOXF6e9ujeN5TDF2mhn7aTVmlaiT4q4LDH385Ro6LMqmN+zrHqYA==","signatures":[{"sig":"MEYCIQD4UP1gBjkrNi3aDH9xzR33lGyLITA354MsRfVtS3G42QIhAJGbLJjgS4Ldl4ooigbqPIYVQ5tOkBgTmw6E2B/egZ45","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14059},"main":"./dist/index.js","type":"module","gitHead":"298bf57284c70eb1af785989436caba143fddd5b","scripts":{"dev":"tsc --watch","lint":"eslint .","build":"tsc"},"_npmUser":{"name":"jenish_sabhadiya","email":"jenish.coderkube@gmail.com"},"_npmVersion":"11.18.0","description":"[![npm version](https://img.shields.io/npm/v/vibe-ui-kit.svg?style=flat-high-contrast&color=a855f7)](https://www.npmjs.com/package/vibe-ui-kit) [![Vercel Deployment](https://img.shields.io/website?up_message=online&url=https%3A%2F%2Fvibe-ui-five.vercel.ap","directories":{},"_nodeVersion":"24.18.0","dependencies":{"prompts":"^2.4.2","fs-extra":"^11.2.0","commander":"^12.0.0"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.4.5","@types/prompts":"^2.4.9","@types/fs-extra":"^11.0.4"},"_npmOperationalInternal":{"tmp":"tmp/vibe-ui-kit_0.1.1_1784121468782_0.8928709679985849","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"vibe-ui-kit","version":"0.1.2","_id":"vibe-ui-kit@0.1.2","maintainers":[{"name":"jenish_sabhadiya","email":"jenish.coderkube@gmail.com"}],"bin":{"vibe-ui":"dist/index.js"},"dist":{"shasum":"1e910537d169e2793c8196574d5bbeac530e252f","tarball":"https://registry.npmjs.org/vibe-ui-kit/-/vibe-ui-kit-0.1.2.tgz","fileCount":3,"integrity":"sha512-byeohSrD2gFADdLIXPX7qZQEeo39Ezj59sQPOmGb/SLNrlYNsVfJ9LJ0SxRDBz6+E7Qg3j0MUN556PFLh4d/6Q==","signatures":[{"sig":"MEYCIQCh/p8CwjZq6vqx5WN7VPgH0jj/lKY9vTsed1jP1h4enQIhANWa+fIbEt++ZuiDlGriLW9uIhVo84elHbi3x4rQG3to","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14076},"main":"./dist/index.js","type":"module","gitHead":"54a1bb8e668211ad840eecc52e8f4b2f20d0b790","scripts":{"dev":"tsc --watch","lint":"eslint .","build":"tsc"},"_npmUser":{"name":"jenish_sabhadiya","email":"jenish.coderkube@gmail.com"},"_npmVersion":"11.18.0","description":"[![npm version](https://img.shields.io/npm/v/vibe-ui-kit.svg?style=flat-high-contrast&color=a855f7)](https://www.npmjs.com/package/vibe-ui-kit) [![Vercel Deployment](https://img.shields.io/website?up_message=online&url=https%3A%2F%2Fvibe-ui-five.vercel.ap","directories":{},"_nodeVersion":"24.18.0","dependencies":{"prompts":"^2.4.2","fs-extra":"^11.2.0","commander":"^12.0.0"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.4.5","@types/prompts":"^2.4.9","@types/fs-extra":"^11.0.4"},"_npmOperationalInternal":{"tmp":"tmp/vibe-ui-kit_0.1.2_1784121631342_0.9865808699739576","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"vibe-ui-kit","version":"0.1.3","_id":"vibe-ui-kit@0.1.3","maintainers":[{"name":"jenish_sabhadiya","email":"jenish.coderkube@gmail.com"}],"bin":{"vibe-ui":"dist/index.js"},"dist":{"shasum":"aa2bfaf0604a28d76cd1d81e47c6f6634b09f04f","tarball":"https://registry.npmjs.org/vibe-ui-kit/-/vibe-ui-kit-0.1.3.tgz","fileCount":3,"integrity":"sha512-xxAgSJQKWhYpjgOSE5c95uB8ilwqdKymdF1mAJoepoFgauq5ZC3m1R1uIg3c8BmldvMKjETQt3I3WVVMKS9smg==","signatures":[{"sig":"MEQCIHZtKD2Onsuvhi3Vn+ViaifN+5gEtiwlqBZuXPYnQS/tAiATF6Vy9BEmJIQtTQq7ENICLg355aQUt49SZUfU/X4mMg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16389},"main":"./dist/index.js","type":"module","gitHead":"671ae38d2964149e16463bacfcf6a5b62160145b","scripts":{"dev":"tsc --watch","lint":"eslint .","build":"tsc"},"_npmUser":{"name":"jenish_sabhadiya","email":"jenish.coderkube@gmail.com"},"_npmVersion":"11.18.0","description":"[![npm version](https://img.shields.io/npm/v/vibe-ui-kit.svg?style=flat-high-contrast&color=a855f7)](https://www.npmjs.com/package/vibe-ui-kit) [![Vercel Deployment](https://img.shields.io/website?up_message=online&url=https%3A%2F%2Fvibe-ui-five.vercel.ap","directories":{},"_nodeVersion":"24.18.0","dependencies":{"prompts":"^2.4.2","fs-extra":"^11.2.0","commander":"^12.0.0"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.4.5","@types/prompts":"^2.4.9","@types/fs-extra":"^11.0.4"},"_npmOperationalInternal":{"tmp":"tmp/vibe-ui-kit_0.1.3_1784786947338_0.333663631192048","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"vibe-ui-kit","version":"0.1.4","_id":"vibe-ui-kit@0.1.4","maintainers":[{"name":"jenish_sabhadiya","email":"jenish.coderkube@gmail.com"}],"bin":{"vibe-ui":"dist/index.js"},"dist":{"shasum":"9d3310f6ab032eca57bdf136fcd8fc96ee66ce0a","tarball":"https://registry.npmjs.org/vibe-ui-kit/-/vibe-ui-kit-0.1.4.tgz","fileCount":3,"integrity":"sha512-tjw9FbA1xtNAOAxlpH99pOiJ3X8w5vq6HfI6EH9pS2KBiISJaBbumwdB/jrs3SyZTRrRpIPb13yTDMSEPN8Dow==","signatures":[{"sig":"MEQCIFe1YQUG0M3/sJ1eRiOaB88ynnbrshS5FvDWo0mvVJzYAiAMr/9pAC1vTL8bCjxqgySOp0pwr33CHU8GuImJSirtIg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16388},"main":"./dist/index.js","type":"module","_from":"file:vibe-ui-kit-0.1.4.tgz","scripts":{"dev":"tsc --watch","lint":"eslint .","build":"tsc"},"_npmUser":{"name":"jenish_sabhadiya","email":"jenish.coderkube@gmail.com"},"_resolved":"C:\\Users\\Admin\\AppData\\Local\\Temp\\87a69152be1e199df559851f4fcf7024\\vibe-ui-kit-0.1.4.tgz","_integrity":"sha512-tjw9FbA1xtNAOAxlpH99pOiJ3X8w5vq6HfI6EH9pS2KBiISJaBbumwdB/jrs3SyZTRrRpIPb13yTDMSEPN8Dow==","_npmVersion":"11.18.0","description":"[![npm version](https://img.shields.io/npm/v/vibe-ui-kit.svg?style=flat-high-contrast&color=a855f7)](https://www.npmjs.com/package/vibe-ui-kit) [![Vercel Deployment](https://img.shields.io/website?up_message=online&url=https%3A%2F%2Fvibe-ui-five.vercel.ap","directories":{},"_nodeVersion":"24.18.0","dependencies":{"prompts":"^2.4.2","fs-extra":"^11.2.0","commander":"^12.0.0"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.4.5","@types/prompts":"^2.4.9","@types/fs-extra":"^11.0.4"},"_npmOperationalInternal":{"tmp":"tmp/vibe-ui-kit_0.1.4_1784808244480_0.09830157121849603","host":"s3://npm-registry-packages-npm-production"}},"0.1.5":{"name":"vibe-ui-kit","version":"0.1.5","_id":"vibe-ui-kit@0.1.5","maintainers":[{"name":"jenish_sabhadiya","email":"jenish.coderkube@gmail.com"}],"bin":{"vibe-ui":"dist/index.js"},"dist":{"shasum":"45b72c8027a5b4ebd6b9a0f8404439bcf14f2e4c","tarball":"https://registry.npmjs.org/vibe-ui-kit/-/vibe-ui-kit-0.1.5.tgz","fileCount":3,"integrity":"sha512-J+5kMVPye3vEIFp41f5jETDOQa5MU+eoA4hGLIIL8TR0Mmnwwt4zTwV41e7+BFRi8lWDQI/tQtq+tgChxZDa8w==","signatures":[{"sig":"MEYCIQC38gNXDbHdouA3sOp2g3P01rUuVuNO2u6vo3wW+9leoAIhAIYV9kyswvpo58tElhryyc+SRs/FWE5JXUv4uEKvqyKk","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16389},"main":"./dist/index.js","type":"module","gitHead":"2028bc6b853edc8c5aa752db207d702cc5d1e75f","scripts":{"dev":"tsc --watch","lint":"eslint .","build":"tsc"},"_npmUser":{"name":"jenish_sabhadiya","email":"jenish.coderkube@gmail.com"},"_npmVersion":"11.18.0","description":"[![npm version](https://img.shields.io/npm/v/vibe-ui-kit.svg?style=flat-high-contrast&color=a855f7)](https://www.npmjs.com/package/vibe-ui-kit) [![Vercel Deployment](https://img.shields.io/website?up_message=online&url=https%3A%2F%2Fvibe-ui-five.vercel.ap","directories":{},"_nodeVersion":"24.18.0","dependencies":{"prompts":"^2.4.2","fs-extra":"^11.2.0","commander":"^12.0.0"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.4.5","@types/prompts":"^2.4.9","@types/fs-extra":"^11.0.4"},"_npmOperationalInternal":{"tmp":"tmp/vibe-ui-kit_0.1.5_1784813372618_0.6123021508431639","host":"s3://npm-registry-packages-npm-production"}},"0.1.6":{"name":"vibe-ui-kit","version":"0.1.6","_id":"vibe-ui-kit@0.1.6","maintainers":[{"name":"jenish_sabhadiya","email":"jenish.coderkube@gmail.com"}],"bin":{"vibe-ui":"dist/index.js"},"dist":{"shasum":"f6ce7e33ece98671e1903d35a54022ec346a5d0c","tarball":"https://registry.npmjs.org/vibe-ui-kit/-/vibe-ui-kit-0.1.6.tgz","fileCount":3,"integrity":"sha512-vBRmp1FQuPbneTHnGcz+Y5ikGHhjuCZEbTiaixFuRBJXVSk3GK4zB7YlEGO8gZENwbNgOfA754WAcl8O9GeE9A==","signatures":[{"sig":"MEUCIQCCbMXzjvwPdx5782AZ1UGvjcJac9WX2RQ+yW9IGckfjwIgLaWFq+eGx8X+ROo432Wba8tllG32GtC3xAei0WqXp/0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":20164},"main":"./dist/index.js","type":"module","gitHead":"5b0f929281dcb63b7e568092af70adaf4f60bf51","scripts":{"dev":"tsc --watch","lint":"eslint .","build":"tsc"},"_npmUser":{"name":"jenish_sabhadiya","email":"jenish.coderkube@gmail.com"},"_npmVersion":"11.18.0","description":"

\"npm \"npm \"npm \n \"npm\n \"downloads\"\n \"docs\"\n \"license\"\n

\n\n
\n\n

✦ Vibe UI Kit ✦

\n\n

\n The modern React & Tailwind CSS component library featuring 94+ accessible UI primitives, WebGL background shaders, and application blocks.
\n Built with React 19 · TypeScript · Tailwind CSS v4 · Radix UI\n

\n\n

\n 📖 Vibe UI Documentation  ·  \n 🧩 94+ Components  ·  \n 🎨 Vibe Studio  ·  \n ⭐ GitHub\n

\n\n
\n\n---\n\n## 💡 Why Vibe UI?\n\nMost component libraries install into `node_modules` — you get **zero design control** and heavy bundle overhead.\n\n**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.\n\n| Feature | Vibe UI | Traditional Libraries |\n| :------------------- | :---------------------------------------------------- | :--------------------------------------- |\n| **Components Count** | **94+ premium, production-ready** | Typically 15-20 |\n| **Install Location** | Your local `src/components/ui/` folder | Bundled inside `node_modules/` |\n| **Customization** | Full control — modify and customize the code directly | Override styles with wrapper css hacks |\n| **Bundle Size** | Minimal — only components you add are compiled | Heavy — loads the entire package library |\n| **Theme Presets** | **5 built-in** (Default, Glassmorphism, Retro, Glow, Cyberpunk) | Usually 1 theme |\n| **Accessibility** | Built on top of Radix UI primitives | Varies / Often lacking |\n\n
\n\n---\n\n## ⚡ Quick Start\n\nGet up and running in **under 2 minutes**:\n\n1. **Initialize project layout & theme:**\n ```bash\n npx vibe-ui-kit init\n ```\n2. **Add a component:**\n ```bash\n npx vibe-ui-kit add button\n ```\n\n> 💡 **Tip:** Run `npx vibe-ui-kit add` without any arguments to open the **interactive multi-select picker** to choose multiple components.\n\n
\n\n---\n\n## 🚀 Full Setup Guide (A to Z)\n\n### Step 1 — Create a React + TypeScript Project\n\n```bash\nnpx create-vite@latest my-vibe-app --template react-ts\ncd my-vibe-app\nnpm install\n```\n\n### Step 2 — Install Tailwind CSS v4\n\n```bash\nnpm add -D tailwindcss @tailwindcss/vite\n```\n\nThen add the Tailwind plugin to your `vite.config.ts`:\n\n```typescript\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport tailwindcss from '@tailwindcss/vite'\n\nexport default defineConfig({\n plugins: [react(), tailwindcss()],\n})\n```\n\n### Step 3 — Add Vibe UI Components\n\nPick individual components:\n\n```bash\n# Add a single component\nnpx vibe-ui-kit add button\n\n# Add another\nnpx vibe-ui-kit add switch\n```\n\nOr use the **interactive picker** to select multiple:\n\n```bash\nnpx vibe-ui-kit add\n```\n\n_The CLI auto-creates `src/components/ui/` and the shared utility helper at `src/lib/utils.ts`._\n\n### Step 4 — Install Peer Dependencies\n\nThe CLI will instruct you exactly what to install. Common dependencies:\n\n```bash\n# Core utilities (always needed)\nnpm add clsx tailwind-merge tailwind-variants @radix-ui/react-slot lucide-react\n\n# Radix primitives (install what your selected components need)\nnpm add @radix-ui/react-accordion @radix-ui/react-alert-dialog \\\n @radix-ui/react-dialog @radix-ui/react-dropdown-menu \\\n @radix-ui/react-progress @radix-ui/react-radio-group \\\n @radix-ui/react-slider @radix-ui/react-toast \\\n @radix-ui/react-hover-card @radix-ui/react-popover \\\n @radix-ui/react-scroll-area @radix-ui/react-menubar\n```\n\n### Step 5 — Apply the Theme\n\nReplace the contents of `src/index.css` with the Vibe UI theme variables:\n\n```css\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\n@import 'tailwindcss';\n\n@theme {\n --color-background: #09090b;\n --color-foreground: #fafafa;\n --color-card: #09090b;\n --color-card-foreground: #fafafa;\n --color-popover: #09090b;\n --color-popover-foreground: #fafafa;\n --color-primary: #a855f7;\n --color-primary-foreground: #ffffff;\n --color-secondary: #27272a;\n --color-secondary-foreground: #fafafa;\n --color-muted: #18181b;\n --color-muted-foreground: #a1a1aa;\n --color-accent: #27272a;\n --color-accent-foreground: #fafafa;\n --color-destructive: #ef4444;\n --color-destructive-foreground: #fafafa;\n --color-border: #27272a;\n --color-input: #27272a;\n --color-ring: #a855f7;\n --radius: 0.75rem;\n}\n\nbody {\n background-color: #09090b;\n color: #fafafa;\n font-family: 'Inter', sans-serif;\n min-height: 100vh;\n}\n```\n\n
\n\n---\n\n## 📂 Project Structure\n\nAfter adding components, your project layout will look like this:\n\n```\nmy-vibe-app/\n├── src/\n│ ├── components/\n│ │ └── ui/\n│ │ ├── button.tsx ← Vibe UI components\n│ │ ├── card.tsx\n│ │ ├── dialog.tsx\n│ │ ├── table.tsx\n│ │ ├── breadcrumb.tsx\n│ │ ├── pagination.tsx\n│ │ ├── toast.tsx\n│ │ ├── calendar.tsx\n│ │ ├── carousel.tsx\n│ │ ├── switch.tsx\n│ │ └── ... (51 total)\n│ ├── lib/\n│ │ └── utils.ts ← Class-merging utility (auto-created)\n│ ├── App.tsx\n│ └── index.css ← Theme config styles\n├── vite.config.ts\n└── package.json\n```\n\n
\n\n---\n\n## 🧩 Components, Shaders & Application Blocks (94+ Items)\n\n### 🎛️ Inputs & Controls (13)\n\n| Component | Description | Docs |\n| :--------------- | :------------------------------------------------------- | :-------------------------------------------------------------------: |\n| **Button** | 10+ style presets — Glow, Retro, Glass, Outline, etc. | [View →](https://vibe-ui-kit.vercel.app/docs/components/button) |\n| **Input** | Text fields with validation states and icon support | [View →](https://vibe-ui-kit.vercel.app/docs/components/input) |\n| **Textarea** | Multi-line text areas with validation states | [View →](https://vibe-ui-kit.vercel.app/docs/components/textarea) |\n| **Checkbox** | Responsive toggle list items | [View →](https://vibe-ui-kit.vercel.app/docs/components/checkbox) |\n| **Switch** | Animated toggle switches with 4 visual presets | [View →](https://vibe-ui-kit.vercel.app/docs/components/switch) |\n| **Slider** | Smooth range inputs with tooltip preview | [View →](https://vibe-ui-kit.vercel.app/docs/components/slider) |\n| **Radio Group** | Single-choice selection with styled indicators | [View →](https://vibe-ui-kit.vercel.app/docs/components/radio-group) |\n| **Select** | Custom styled select dropdowns | [View →](https://vibe-ui-kit.vercel.app/docs/components/select) |\n| **Multi-Select** | Multi-value select with tags and search | [View →](https://vibe-ui-kit.vercel.app/docs/components/multi-select) |\n| **Input OTP** | Access code inputs with focus loops and cursor lines | [View →](https://vibe-ui-kit.vercel.app/docs/components/input-otp) |\n| **Toggle** | Two-state toggle buttons with icon configurations | [View →](https://vibe-ui-kit.vercel.app/docs/components/toggle) |\n| **Uploader** | Drag-and-drop dropzone uploader with file state previews | [View →](https://vibe-ui-kit.vercel.app/docs/components/uploader) |\n| **Command** | Command palette / search interface | [View →](https://vibe-ui-kit.vercel.app/docs/components/command) |\n\n### 📐 Layout & Structure (10)\n\n| Component | Description | Docs |\n| :--------------- | :--------------------------------------------------------------- | :-------------------------------------------------------------------: |\n| **Card** | Glass containers with backdrop filters and border effects | [View →](https://vibe-ui-kit.vercel.app/docs/components/card) |\n| **Accordion** | Collapsible content sections with smooth animations | [View →](https://vibe-ui-kit.vercel.app/docs/components/accordion) |\n| **Tabs** | Seamless sliding tab views with animated indicator | [View →](https://vibe-ui-kit.vercel.app/docs/components/tabs) |\n| **Table** | Data tables with glass variants, sortable headers & striped rows | [View →](https://vibe-ui-kit.vercel.app/docs/components/table) |\n| **Separator** | Visual content dividers (horizontal & vertical) | [View →](https://vibe-ui-kit.vercel.app/docs/components/separator) |\n| **Label** | Accessible form-control labels | [View →](https://vibe-ui-kit.vercel.app/docs/components/label) |\n| **Scroll Area** | Custom scrollbars with smooth overflow scrolling | [View →](https://vibe-ui-kit.vercel.app/docs/components/scroll-area) |\n| **Aspect Ratio** | Fixed size ratios for pictures and visual blocks | [View →](https://vibe-ui-kit.vercel.app/docs/components/aspect-ratio) |\n| **Collapsible** | Accordion style expanders for hidden details | [View →](https://vibe-ui-kit.vercel.app/docs/components/collapsible) |\n| **Layout Shell** | Grid layouts with interactive sidebars and headers | [View →](https://vibe-ui-kit.vercel.app/docs/components/layout-shell) |\n\n### 🪟 Overlays & Dialogs (7)\n\n| Component | Description | Docs |\n| :---------------- | :----------------------------------------- | :--------------------------------------------------------------------: |\n| **Dialog** | Modal overlay boxes with backdrop blur | [View →](https://vibe-ui-kit.vercel.app/docs/components/dialog) |\n| **Alert Dialog** | Confirmation dialogs for critical actions | [View →](https://vibe-ui-kit.vercel.app/docs/components/alert-dialog) |\n| **Drawer** | Slide-in panel overlays from any edge | [View →](https://vibe-ui-kit.vercel.app/docs/components/drawer) |\n| **Dropdown Menu** | Contextual menus with keyboard navigation | [View →](https://vibe-ui-kit.vercel.app/docs/components/dropdown-menu) |\n| **Popover** | Floating panels anchored to triggers | [View →](https://vibe-ui-kit.vercel.app/docs/components/popover) |\n| **Hover Card** | Rich hover previews with metadata | [View →](https://vibe-ui-kit.vercel.app/docs/components/hover-card) |\n| **Menubar** | Top horizontal menus for layout navigation | [View →](https://vibe-ui-kit.vercel.app/docs/components/menubar) |\n\n### 🔔 Feedback & Status (11)\n\n| Component | Description | Docs |\n| :----------- | :------------------------------------------------- | :---------------------------------------------------------------: |\n| **Progress** | Animated progress bars with gradient indicators | [View →](https://vibe-ui-kit.vercel.app/docs/components/progress) |\n| **Skeleton** | Content loading placeholders with shimmer effects | [View →](https://vibe-ui-kit.vercel.app/docs/components/skeleton) |\n| **Badge** | Status indicators with glow and preset variations | [View →](https://vibe-ui-kit.vercel.app/docs/components/badge) |\n| **Alert** | Callout messages with severity states | [View →](https://vibe-ui-kit.vercel.app/docs/components/alert) |\n| **Tooltip** | Hover informational overlays | [View →](https://vibe-ui-kit.vercel.app/docs/components/tooltip) |\n| **Toast** | Notification toasts with actions and swipe dismiss | [View →](https://vibe-ui-kit.vercel.app/docs/components/toast) |\n| **Calendar** | Date picker calendar with range and day states | [View →](https://vibe-ui-kit.vercel.app/docs/components/calendar) |\n| **Kbd** | Inline keyboard shortcut indicators | [View →](https://vibe-ui-kit.vercel.app/docs/components/kbd) |\n| **Marker** | Highlighting triggers for alerts and search scopes | [View →](https://vibe-ui-kit.vercel.app/docs/components/marker) |\n| **Message** | Chat notification bubbles and messages | [View →](https://vibe-ui-kit.vercel.app/docs/components/message) |\n| **Spinner** | Shimmer loaders and spinner indicator icons | [View →](https://vibe-ui-kit.vercel.app/docs/components/spinner) |\n\n### 📊 Data Display & Navigation (10)\n\n| Component | Description | Docs |\n| :------------------- | :--------------------------------------------------------- | :-----------------------------------------------------------------------: |\n| **Avatar** | User avatars with glow rings and initial fallbacks | [View →](https://vibe-ui-kit.vercel.app/docs/components/avatar) |\n| **Breadcrumb** | Responsive navigation breadcrumbs with separators | [View →](https://vibe-ui-kit.vercel.app/docs/components/breadcrumb) |\n| **Pagination** | Page navigation with active states and ellipsis | [View →](https://vibe-ui-kit.vercel.app/docs/components/pagination) |\n| **Carousel** | Slide carousels with autoplay and navigation | [View →](https://vibe-ui-kit.vercel.app/docs/components/carousel) |\n| **Infinite Scroll** | Scroll loaders with pagination and dynamic checks | [View →](https://vibe-ui-kit.vercel.app/docs/components/infinite-scroll) |\n| **Item** | Configurable catalog or items lists layouts | [View →](https://vibe-ui-kit.vercel.app/docs/components/item) |\n| **Marquee** | Sliding logo walls and loop marquees | [View →](https://vibe-ui-kit.vercel.app/docs/components/marquee) |\n| **Message Scroller** | Container streams with message history listings | [View →](https://vibe-ui-kit.vercel.app/docs/components/message-scroller) |\n| **Text Glitch** | Animated title headers with cyber glitch effects | [View →](https://vibe-ui-kit.vercel.app/docs/components/text-glitch) |\n| **Theme Switcher** | Toggles resolving dark/light settings across layout frames | [View →](https://vibe-ui-kit.vercel.app/docs/components/theme-switcher) |\n\n### 🧩 Full Application Blocks (8)\n\n| Block | Description | Docs |\n| :--------------------- | :--------------------------------------------------------------- | :--------------------------------------------------------------------: |\n| **Pricing 01** | SaaS tiered pricing table with currency switcher & checkout | [View →](https://vibe-ui-kit.vercel.app/docs/blocks/pricing-01) |\n| **Kanban 01** | Agile sprint board with swimlanes, subtasks & sprint analytics | [View →](https://vibe-ui-kit.vercel.app/docs/blocks/kanban-01) |\n| **Dashboard 01** | Admin dashboard with lifecycle metrics & data table drawer | [View →](https://vibe-ui-kit.vercel.app/docs/blocks/dashboard-01) |\n| **E-commerce 01** | Modern storefront with shopping bag sheet & responsive catalog | [View →](https://vibe-ui-kit.vercel.app/docs/blocks/ecommerce-01) |\n| **E-commerce 02** | Minimalist product grid with category filters & review modal | [View →](https://vibe-ui-kit.vercel.app/docs/blocks/ecommerce-02) |\n| **Chat 01** | AI chat workspace with prompt chips, streaming UI & composer | [View →](https://vibe-ui-kit.vercel.app/docs/blocks/chat-01) |\n| **Auth 01** | Glassmorphism authentication with social logins & form validation| [View →](https://vibe-ui-kit.vercel.app/docs/blocks/auth-01) |\n| **Crypto Glass 01** | Dark-mode DeFi portfolio tracker with live market charts | [View →](https://vibe-ui-kit.vercel.app/docs/blocks/crypto-glass-01) |\n\n### 🌌 WebGL Background Shaders (5)\n\n| Shader | Description | Docs |\n| :----------------- | :----------------------------------------------------------- | :--------------------------------------------------------------------: |\n| **Light Tunnel** | Hyperspace ray-marched warp tunnel shader | [View →](https://vibe-ui-kit.vercel.app/docs/backgrounds/light-tunnel) |\n| **Lightfall** | Ambient cyber digital rain with falling glowing particles | [View →](https://vibe-ui-kit.vercel.app/docs/backgrounds/lightfall) |\n| **Scanner** | Tron-style holographic glowing grid horizon | [View →](https://vibe-ui-kit.vercel.app/docs/backgrounds/scanner) |\n| **Sliced Waves** | Smooth ribbon waves with custom gradient amplitudes | [View →](https://vibe-ui-kit.vercel.app/docs/backgrounds/sliced-waves) |\n| **Web Threads** | Intertwined neon laser lines with reactive mouse deflection | [View →](https://vibe-ui-kit.vercel.app/docs/backgrounds/web-threads) |\n\n
\n\n---\n\n## 🎨 4 Visual Presets\n\nEvery component supports **4 built-in visual themes** you can toggle with a single `variant` prop:\n\n- `default` — Clean, minimal typography layout\n- `glass` — Frosted glassmorphism saturation with high backdrop blur\n- `retro` — Warm neobrutalism aesthetics with hard shadows and borders\n- `glow` — Neon-lit with color shadow glow aura animations\n\n```tsx\nimport { Button } from './components/ui/button'\nimport { Switch } from './components/ui/switch'\nimport { Card } from './components/ui/card'\n\nexport default function Example() {\n return (\n <>\n \n \n Retro Card\n \n )\n}\n```\n\n
\n\n---\n\n## 🔧 CLI Reference\n\n### 1. `init` — Project setup\n\nInitialize the workspace theme configuration and utils helper.\n\n```bash\nnpx vibe-ui-kit init [options]\n```\n\n**Options:**\n\n- `-y, --yes` — Skip interactive prompts and write default config paths (`./src/components/ui`, `./src/lib/utils.ts`, and auto-detected CSS file).\n\n---\n\n### 2. `add` — Install components\n\nAdd one or more Vibe UI components to your project.\n\n```bash\nnpx vibe-ui-kit add [components...] [options]\n```\n\n**Arguments:**\n\n- `components` — Component name(s) to add (e.g. `button`, `switch`). Omit to open the interactive picker.\n\n**Options:**\n\n- `-y, --yes` — Skip interactive installation prompts.\n\n
\n\n---\n\n## ❓ Troubleshooting\n\n
\nTypeScript: Unused variable warnings in component files\n
\nSome components may generate unused-parameter warnings (e.g., `context` in `avatar.tsx`). Make sure you're using the latest CLI version which resolves these:\n\n```bash\nnpx vibe-ui-kit@latest add avatar\n```\n\n
\n\n
\nTypeScript: Cannot find namespace 'NodeJS'\n
\nIf you see `Cannot find namespace 'NodeJS'` errors related to timer types (e.g., in `tooltip.tsx`), change the type annotation to:\n\n```typescript\n// Before\nlet timer: NodeJS.Timeout\n\n// After\nlet timer: ReturnType\n```\n\n
\n\n
\nComponents not styled correctly\n
\nMake sure you've:\n1. Applied the theme CSS in `src/index.css` (see [Step 5](#step-5--apply-the-theme))\n2. Installed `tailwindcss` v4 and the `@tailwindcss/vite` plugin\n3. Added the Tailwind plugin to your `vite.config.ts`\n
\n\n
\nImport path errors after install\n
\nThe CLI automatically calculates relative import paths. If you changed the install directories, verify that the import in your component files points to the correct `utils.ts` location:\n\n```typescript\n// Should match your actual file structure\nimport { cn } from '../../lib/utils'\n```\n\n
\n\n
\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome! Check the [GitHub Repository](https://github.com/jenishCoderkube/Vibe-uI) for issues and pull requests.\n\n---\n\n## 📄 License\n\nMIT © [Vibe UI](https://github.com/jenishCoderkube/Vibe-uI)\n\n
\n\n

\n Built with ♥ for developers who care about design.
\n Documentation · GitHub · npm\n

\n","readmeFilename":"README.md"}