Vite Installation

Follow these steps to install and set up Gengar UI with Vite and Tailwind CSS v4.

1. Create a new Vite project

terminal

npm create vite@latest my-gengar-ui-app -- --template react-ts

2. Install dependencies

terminal

npm install tailwindcss @tailwindcss/vite @radix-ui/react-slot class-variance-authority clsx tailwind-merge lucide-react

3. Configure Vite

Update your vite.config.ts file to use the Tailwind CSS v4 Vite plugin:

vite.config.ts

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

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

4. Add global styles

Update your index.css file with Tailwind v4 imports and theme configuration:

src/index.css

@import "tailwindcss";

@theme {
  --color-background: 0 0% 100%;
  --color-foreground: 0 0% 4.9%;
  --color-card: 0 0% 100%;
  --color-card-foreground: 0 0% 4.9%;
  --color-popover: 0 0% 100%;
  --color-popover-foreground: 0 0% 4.9%;
  --color-primary: 0 0% 11.2%;
  --color-primary-foreground: 0 0% 98%;
  --color-secondary: 0 0% 96.1%;
  --color-secondary-foreground: 0 0% 11.2%;
  --color-muted: 0 0% 96.1%;
  --color-muted-foreground: 0 0% 46.9%;
  --color-accent: 0 0% 96.1%;
  --color-accent-foreground: 0 0% 11.2%;
  --color-destructive: 0 84.2% 60.2%;
  --color-destructive-foreground: 0 0% 98%;
  --color-border: 0 0% 91.4%;
  --color-input: 0 0% 91.4%;
  --color-ring: 0 0% 4.9%;
  --radius: 0.5rem;
  --color-terminal-red: 0 84.2% 60.2%;
  --color-terminal-yellow: 38 92% 50%;
  --color-terminal-green: 142 71% 45%;
}

@media (prefers-color-scheme: dark) {
  @theme {
    --color-background: 0 0% 4.9%;
    --color-foreground: 0 0% 98%;
    --color-card: 0 0% 4.9%;
    --color-card-foreground: 0 0% 98%;
    --color-popover: 0 0% 4.9%;
    --color-popover-foreground: 0 0% 98%;
    --color-primary: 0 0% 98%;
    --color-primary-foreground: 0 0% 11.2%;
    --color-secondary: 0 0% 17.5%;
    --color-secondary-foreground: 0 0% 98%;
    --color-muted: 0 0% 17.5%;
    --color-muted-foreground: 0 0% 65.1%;
    --color-accent: 0 0% 17.5%;
    --color-accent-foreground: 0 0% 98%;
    --color-destructive: 0 62.8% 30.6%;
    --color-destructive-foreground: 0 0% 98%;
    --color-border: 0 0% 17.5%;
    --color-input: 0 0% 17.5%;
    --color-ring: 0 0% 83.9%;
    --color-terminal-red: 0 62.8% 30.6%;
    --color-terminal-yellow: 38 92% 30%;
    --color-terminal-green: 142 71% 25%;
  }
}

@layer base {
  * {
    border-color: hsl(var(--color-border));
  }
  body {
    background-color: hsl(var(--color-background));
    color: hsl(var(--color-foreground));
  }
}

5. Start using Gengar UI components

You can now start using Gengar UI components in your Vite project. Copy the component files you need from our documentation and use them in your application.

✨ Tailwind CSS v4 with Vite Benefits:

• Optimized for Vite - First-party Vite plugin for maximum performance
• Hot Module Replacement - Instant style updates during development
• Faster builds - Up to 3x faster than v3
• Dynamic utilities - Use any value without configuration

Getting Started

Components