Base UI

Overview

Use Base UI as an unstyled, accessible React primitive layer. Keep semantics, focus, labels, keyboard behavior, and styling hooks intact while adapting the parts to the host app's design system.

Workflow

1. Confirm the installed package and version from the project before changing code. Use @base-ui/react, not the retired @base-ui-components/react package name.
2. Read the relevant reference before implementing:
   • references/source-map.md: current docs sources, package status, and component inventory.
   • references/core-patterns.md: setup, styling, composition, state, TypeScript, animation, accessibility, and utilities.
   • references/component-patterns.md: common component anatomy and implementation notes by component family.
3. Fetch current official docs when exact prop names, event reasons, release behavior, or component APIs matter. Prefer Context7 library /mui/base-ui, Exa, or the page's .md URL from https://base-ui.com/llms.txt.
4. Build from Base UI parts first, then wrap with local design-system components only through the documented render prop or thin wrappers that preserve props and refs.
5. Verify keyboard behavior, focus return, accessible names, controlled/uncontrolled state, portal layering, animation exit behavior, and responsive/mobile behavior.

Implementation Rules