UI Components

The UI is built with shadcn/ui and Tailwind CSS.

shadcn/ui

shadcn/ui provides a collection of re-usable components that you can copy and paste into your apps.

Components are located in src/components/ui/.

To add a new component, you can use the shadcn CLI (if configured) or manually copy the code from the documentation.

npx shadcn-ui@latest add button

You can customize the theme in src/styles/globals.css (Tailwind CSS variables).

The project uses Tailwind CSS v4 for styling.

Config: Configuration is handled via CSS variables and the @theme directive in CSS.
Utility Classes: Use utility classes directly in your components.

<div className="p-4 bg-primary text-primary-foreground rounded-lg">
  Hello World
</div>

Icons are provided by Lucide React.

import { Bell } from 'lucide-react';

<Bell className="w-4 h-4" />