--- name: ui-components description: Complete UI component library. Contains buttons, form inputs, cards, modals, and all interactive elements. Activated when building React components, forms, or UI elements. allowed-tools: Read, Write, Glob, Grep --- # UI Component Library Complete component patterns for building applications with React and Tailwind CSS. **Live Reference:** See `\/styleguide` for interactive examples and full documentation. ## Using the Component Library Import components using the `@\/` path alias: ```tsx import { Button, Badge, Card, Input, Icon, SectionHeader } from '@\/components\/ui' ``` ### Available Components | Component | Description | Key Props | | --------------- | ---------------------------- | ------------------------------------------------- | | `Button` | All button variants | `variant`, `size`, `onDark` | | `Badge` | Labels and status indicators | `variant`, `showDot`, `onDark` | | `Card` | Content containers | `variant`, `padding`, `hoverable` | | `Input` | Form inputs with labels | `type`, `label`, `error`, `helperText` | | `Icon` | Lucide icons integration | `name`, `size` | | `SectionHeader` | Section titles with overline | `overline`, `headline`, `body`, `align`, `onDark` | | `FadeInView` | Scroll-triggered animations | `direction`, `delay` | --- ## Raw Tailwind Patterns (Reference) Below are raw Tailwind patterns for cases where you need custom implementations. ## Buttons ### Primary Button ```tsx