Shadcn UI

          
            # Shadcn UI Guidelines

## Context

- Shadcn UI is a collection of reusable components built using Radix UI and Tailwind CSS
- It's not a component library, but a collection of components you copy and paste into your project
- The components are unstyled and customizable
- Shadcn UI now fully supports Tailwind CSS v4 and React 19

## Component Usage

- Install components using the CLI: `bunx shadcn-ui@latest add <component-name>`
- Components should be added to the `components/ui` directory
- Do not modify files in the `components/ui` directory directly - create wrapper components instead
- Always check the documentation before implementing new components: https://ui.shadcn.com/docs

## Styling Guidelines

- Use Tailwind CSS for all component styling
- Follow the project's color theme defined in the CSS using the `@theme` directive (not in `tailwind.config.js`)
- Use the theme's semantic color tokens (e.g., `--color-primary`, `--color-secondary`) rather than raw color values
- Colors now use OKLCH format instead of HSL for better color representation
- For dark mode support, use the built-in `dark:` variant from Tailwind
- Utilize `data-slot` attributes now present on all primitives for targeted styling

## Custom Components

- When extending shadcn components, create wrapper components in separate directories
- Use composition rather than inheritance when building on existing components
- Follow the same naming conventions as shadcn components
- No need to use `forwardRef` with React 19 components
- Use the new `size-*` utility instead of width/height combinations

## Forms

- Use the form components from shadcn with the `react-hook-form` pattern
- Follow the Zod validation pattern for type-safe form validation
- Maintain consistent error handling across all forms

## Best Practices

- Use the `cn()` utility function from `lib/utils` to merge Tailwind classes
- Use `tw-animate-css` instead of the deprecated `tailwindcss-animate`
- Follow accessibility best practices as outlined in the shadcn documentation
- Ensure all interactive components have appropriate keyboard navigation support
- Test components in both light and dark mode
- Use `@import "tailwindcss";` instead of the legacy `@tailwind` directives in CSS