Manual Installation

Follow these steps to manually install and set up Gengar UI with Tailwind CSS v4 in your project.

1. Install dependencies

terminal

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

2. Configure PostCSS

Create a postcss.config.js file in your project root:

postcss.config.js

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

3. Create your CSS file

Create a CSS file (e.g., styles.css) with Tailwind v4 imports and theme configuration:

styles.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));
  }
}

4. Import your CSS

Import your CSS file in your main application file (e.g., main.js, index.js, or App.js):

main.js

import './styles.css'

5. Start using Gengar UI components

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

✨ Tailwind CSS v4 Benefits:

• No configuration file needed - CSS-first configuration approach
• Faster builds - Up to 3x faster than v3
• Dynamic utilities - Use values like grid-cols-15 without pre-configuration
• Modern CSS features - Built-in container queries, 3D transforms, and more

Getting Started

Components