mui-base

A headless React component handles logic, state, and accessibility without bundled styles. You need headless components when building a highly customizable UI library that requires full control over visual rendering and markup.

Structure your React component library using scalable directory organizations, consistent naming conventions, and compound component exports. Enforcing these patterns ensures long-term maintainability and robust accessibility standards across your codebase.

Best practices for managing state in unstyled React components include utilizing controlled and uncontrolled state patterns, React context for dependency injection, and render props to pass state down without enforcing a specific DOM structure.

Yes, TypeScript is fully supported and recommended. Using TypeScript with headless component architecture enforces strict typing for component props, context values, and render prop signatures, ensuring a consistent developer experience.

Handle errors in unstyled React UI primitives by adopting robust warning mechanisms and strict validation within your custom hooks and components. This approach improves debugging and maintains predictable behavior for library consumers.

You should use forwardRef for components requiring DOM node access or ref forwarding by parent consumers. Applying it consistently across your headless library ensures flexible integration and standard React ref compatibility.