components

Component Conventions

Performance (LCP images, INP, bfcache) → web-performance.mdc.

Reuse First

• Check @/components/ui/ before creating any UI element; a second Button or Dialog forks the design system
• Import existing primitives: Button, Card, Input, Dialog, etc.
• Use cn() from @/lib/utils for className composition
• Use CVA (class-variance-authority) for component variants

Component Structure

// 1. Imports
import { cn } from '@/lib/utils'

// 2. Types (or import from types.ts if >5 lines)
interface Props { ... }

// 3. Component (named export, not default)
export function ComponentName({ prop1, prop2, className }: Props) {
  // hooks first
  // derived state
  // handlers
  // render
}

Rules

• Server Components by default — only add 'use client' at leaf components
• Max 300 lines per component — extract sub-components if larger
• Props destructured in function signature
• No inline styles — use Tailwind classes
• No business logic in components — extract to hooks or utils
• All interactive elements need hover, focus, active, and disabled states
• All async UI needs loading, error, and empty states

Naming

• Components: PascalCase.tsx
• Hooks: useCamelCase.ts
• Utils: camelCase.ts
• Types: types.ts or camelCase.types.ts

Accessibility

• Semantic HTML elements (<button>, <nav>, <main>)
• All inputs have associated <label> or aria-label
• All images have descriptive alt text
• Focus indicators visible on keyboard navigation
• aria-live for dynamic content updates