Getting Started with Gea UI

Installation

npm install @geajs/ui

@geajs/ui requires @geajs/core as a peer dependency:

npm install @geajs/core

Tailwind CSS Setup

@geajs/ui uses Tailwind CSS v4 for styling. The theme CSS that ships with the library sets up Tailwind and all design tokens.

1. Install Tailwind and its Vite plugin

npm install -D tailwindcss @tailwindcss/vite

Add the plugin to your vite.config.ts:

import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'

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

2. Import the Theme CSS

Import the theme stylesheet once in your entry point. It sets up Tailwind, all semantic color tokens, and dark mode support:

// main.ts
import '@geajs/ui/style.css'

3. (Optional) Extend with Your Own CSS

If you need additional Tailwind utilities or custom styles, create a CSS file and import it after the theme:

/* src/style.css */
/* your custom theme extensions or utilities */

// main.ts
// make sure the theme is imported first
import '@geajs/ui/style.css'
import './style.css'

You don't have to @import "tailwindcss"; in your CSS file, it is already loaded by the theme.

Minimal Example

import { Component } from '@geajs/core'
import { Button, Card, CardHeader, CardTitle, CardContent } from '@geajs/ui'
import '@geajs/ui/style.css'

export default class App extends Component {
  template() {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Welcome</CardTitle>
        </CardHeader>
        <CardContent>
          <p>Your Gea UI setup is working.</p>
          <Button>Get Started</Button>
        </CardContent>
      </Card>
    )
  }
}

The cn Utility

@geajs/ui exports a cn helper that merges class names with clsx and tailwind-merge. Use it when you need to conditionally compose Tailwind classes without conflicts:

import { cn } from '@geajs/ui'

const classes = cn(
  'px-4 py-2 rounded',
  isActive && 'bg-primary text-primary-foreground',
  isDisabled && 'opacity-50 pointer-events-none',
)