react-headless-dev

Headless React components separate logic from styling by implementing state management and behavior in custom hooks, then exporting unstyled primitives. Create a `use{Component}.ts` hook to handle state and logic, then build the component file that consumes it, organizing multi-part exports with namespace patterns for composition.

Headless components provide only logic, state, and data attributes without CSS, letting you apply styling separately. This approach decouples business logic from visual presentation, enabling multiple design systems—like @seed-design/react—to style the same primitives differently without duplicating logic.

Use namespace-based exports to organize related primitives together. Export a parent component as the namespace, then attach sub-components as properties (e.g., `Dialog.Trigger`, `Dialog.Content`). This pattern groups related logic while keeping composition explicit and readable.

Yes, data attributes serve as state indicators in headless components, enabling styling and testing hooks without direct style coupling. Define and apply data attributes (e.g., `data-state`, `data-disabled`) in your hooks and components to reflect internal state, letting consumers query and style based on these attributes.

Custom hooks isolate reusable state management and behavior, making it composable across multiple components. This separation lets you test logic independently, reuse hooks in different contexts, and refactor business logic without touching component rendering—core to maintainable headless architecture.

No, headless components work without styling frameworks. They output unstyled, accessible primitives you can style with any CSS approach. However, styling frameworks like @seed-design/react are designed to consume headless components and provide pre-built visual designs.