Astro Installation

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

1. Create a new Astro project

terminal

npm create astro@latest my-gengar-ui-app

2. Install dependencies

terminal

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

3. Configure Astro

Update your astro.config.mjs file to include the Tailwind CSS v4 integration:

astro.config.mjs

import { defineConfig } from 'astro/config';
import tailwind from "@tailwindcss/astro";

export default defineConfig({
  integrations: [tailwind()]
});

4. Add global styles

Create or update your src/styles/global.css file with Tailwind v4 imports and theme configuration:

src/styles/global.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 Astro project. Copy the component files you need from our documentation and use them in your pages or components.

✨ Tailwind CSS v4 with Astro Benefits:

• Native Astro integration - First-party support for Tailwind v4
• Island architecture - Optimized for Astro's component hydration
• Faster builds - Up to 3x faster than v3
• Dynamic utilities - Use any value without configuration

Getting Started

Components