React Component Development

Patterns for building composable, accessible, well-structured React components.

Core Principles

1. Composition over configuration - Props enable customization, not enumerate options
2. Forwarding refs - Components that render DOM elements forward refs
3. Accessibility first - Keyboard, screen readers, reduced motion
4. Predictable APIs - Consistent prop patterns across components

Component Template

import { forwardRef, type ComponentPropsWithoutRef } from "react"
import { cn } from "@/lib/utils"