---
description: React component standards and patterns
globs: **/*.{tsx,jsx}
alwaysApply: false
---

- Always use TypeScript for React components.
- Prefer functional components with hooks; avoid class components.
- Use named exports for components; default export only for pages.
- Colocate component styles with Tailwind utility classes.
- Extract reusable logic into custom hooks in `src/hooks/`.
- Use descriptive prop interfaces with `interface` (not `type` for props).
- Handle loading, error, and empty states explicitly.
- Prefer composition over prop drilling; use context sparingly.
- Add `aria-*` attributes for interactive elements.
- Keep components under 150 lines; split when larger.