Remix Installation

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

1. Create a new Remix project

terminal

npx create-remix@latest my-gengar-ui-app

2. Install dependencies

terminal

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

3. Configure PostCSS

Create or update your postcss.config.js file:

postcss.config.js

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

4. Add global styles

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

app/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. Import styles in root

Update your app/root.tsx file to import the global styles:

app/root.tsx

import styles from "./styles/global.css"

export function links() {
  return [{ rel: "stylesheet", href: styles }]
}

6. Start using Gengar UI components

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

✨ Tailwind CSS v4 with Remix Benefits:

• Remix-optimized - Works seamlessly with Remix's routing and data loading
• Server-side rendering - Full SSR support with proper CSS delivery
• Faster builds - Up to 3x faster than v3
• Dynamic utilities - Use any value without configuration

Getting Started

Components

Custom