At its core, Base UI is a foundational set of reusable React components, with an architecture that enables teams to create new design languages on top of it. By default, these components use the Base UI design language which, as the name suggests, acts as a base design language you can further customize.
If you'd like to build applications using the Base UI design language, in most cases you won't need to override components. This helps build consistent applications.
Every internal element is given an identifier that developers can target with changes/overrides. You can almost think of these like class names (but without the downsides of CSS cascade and global namespace).
For each internal element, you can override the props, the style, and the component.
Use cases for style overrides:
- Buiding a design system on top of Base UI
- You have a special case that Base UI does not cover
Use cases for prop overrides:
- You have to pass in a property for the underlying component, like "data-" attribitues for testing
Use cases for component overrides:
- You have to swap the whole subcomponent
To learn more about how overrides work, check out Better Reusable React Components with the Overrides Pattern article.