UI Components

---
description: UI Components API reference and guidelines
globs: **/*.tsx
---

# UI Components

- Reusable UI components are defined in the "packages/ui" package named "@init/ui".
- By exporting the component from the "exports" field, we can import it using the "@init/ui/{component-name}" format.

## Styling
- Styling is done using Tailwind CSS. We use the "cn" function from the "@init/ui/utils" package to generate class names.
- Avoid fixed classes such as "bg-gray-500". Instead, use Shadcn classes such as "bg-background", "text-secondary-foreground", "text-muted-foreground", etc.

## Importing Components

```tsx
// Import UI components
import { Button } from '@init/ui/button';
import { Card } from '@init/ui/card';
```