React Components

Quick Guide: Tiered components (Primitives -> Components -> Patterns -> Templates). React 19: pass ref as a prop directly (no forwardRef needed). Expose className prop for styling flexibility. Use useActionState for forms, useOptimistic for instant feedback, use() for conditional promise/context reading. Ref callbacks can return cleanup functions.

<critical_requirements>

CRITICAL: Before Using This Skill

All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering, import type, named constants)

(You MUST pass ref as a regular prop in React 19 - forwardRef is deprecated)

(You MUST expose className prop on ALL reusable components for customization)

(You MUST use useActionState for form submissions with pending/error state)

(You MUST call useFormStatus from a child component inside <form>, NOT in the component that renders the form)