--- description: globs: **/*.{ts,tsx} alwaysApply: false --- # UI and Components Guide ## Component Structure - Components in `src/components/` - Follow atomic design principles - Use Radix UI primitives - Implement proper accessibility - Use Tailwind CSS for styling - Follow consistent naming - Keep components focused - Implement proper error states - Handle loading states - Use proper TypeScript types ## UI Libraries - Radix UI for primitives - Tailwind CSS for styling - Framer Motion for animations - React Hook Form for forms - Zod for validation - Lucide React for icons - Tabler Icons for additional icons - Sonner for toasts - Vaul for drawers - Embla Carousel for carousels ## Styling Guidelines - Use Tailwind CSS classes - Follow design system tokens - Implement dark mode support - Use proper spacing scale - Follow color palette - Implement responsive design - Use proper typography - Handle hover/focus states - Implement proper transitions - Use proper z-index scale ## Accessibility - Use semantic HTML - Implement proper ARIA labels - Handle keyboard navigation - Support screen readers - Use proper color contrast - Implement focus management - Handle dynamic content - Support reduced motion - Test with assistive tools - Follow WCAG guidelines