Base UI Primitives

Quick Guide: Base UI is an unstyled React component library built by the creators of Radix, Material UI and Floating UI. Components are split into named parts (Root, Trigger, Portal, Positioner, Popup, Arrow), polymorphism is done with the render prop (there is no asChild), state is exposed as data attributes and as an argument to className/style functions, and every change handler receives an eventDetails object whose cancel() method can veto the state change. Current: v1.7.0 (August 2026) — package is @base-ui/react, imported per component subpath.

<critical_requirements>

CRITICAL: Before Using This Skill

All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering, import type, named constants)

(You MUST install and import @base-ui/react from per-component subpaths — @base-ui/react/popover, @base-ui/react/field. The older @base-ui-components/react package is frozen at a release candidate and MUST NOT be used.)

(You MUST use the render prop for polymorphism — Base UI has NO asChild. A component passed to render MUST forward its ref and spread every received prop onto its DOM node.)

(You MUST nest popups as Portal > Positioner > Popup and put every positioning prop — side, align, sideOffset, collisionPadding — on Positioner, never on Popup.)

(You MUST style state from Base UI's own data attributes — data-open/data-closed, data-starting-style/data-ending-style, data-popup-open — or from the state argument to className/style. Never mirror popup state into your own React state to drive styles.)