Base UI best practices

Use when building or reviewing React UI with Base UI.

Mental model

• Base UI is an unstyled accessible component library. It gives you behavior, state, semantics, and accessibility primitives, not finished product styling.
• Treat Base UI as the foundation of a design system, not as a shortcut to finished visual design.
• Keep styling, tokens, and product-specific composition in your codebase while relying on Base UI for the hard interaction and accessibility work.

Composition and ownership

• Compose Base UI primitives into product-facing components that match your design system.
• Keep the primitive layer understandable; wrappers should clarify ownership, not hide every state and slot behind abstractions.
• Prefer reusable product-level components over reassembling low-level primitives differently in every screen.

Accessibility and semantics