Base UI

Base UI is a headless React component library from the team behind Material UI, Radix, and Floating UI. It ships fully accessible primitives such as dialogs, menus, comboboxes, selects, tooltips, and form fields with zero built-in styles, so you own every pixel of markup and CSS.

Rather than fighting a pre-styled component kit, you compose Base UI’s unstyled parts and apply your own classes, giving you complete control over appearance while inheriting robust keyboard navigation, focus management, and WAI-ARIA behavior out of the box.

What You Get

• A broad catalog of unstyled primitives: accordion, dialog, menu, combobox, select, popover, tabs, tooltip, slider, switch, and more
• Complete accessibility handling with WAI-ARIA roles, keyboard interaction, and focus management built in
• A full suite of form primitives (field, fieldset, form, input, number field, OTP field, radio, checkbox) with validation wiring
• A useRender hook and mergeProps utility for composing your own elements and merging behavior onto custom markup
• First-class TypeScript types and tree-shakeable per-component entry points

Common Use Cases

• Building a custom design system where you control all styling but need reliable accessibility
• Replacing a heavier, pre-styled component library with lightweight headless primitives
• Adding complex interactive widgets (comboboxes, menus, dialogs) without reimplementing ARIA behavior
• Composing accessible forms with consistent field, validation, and label wiring

Under The Hood

Architecture — Base UI is a pnpm/Lerna monorepo whose primary published package (packages/react) exposes each widget as a set of compound components (for example Switch.Root in src/switch/root/SwitchRoot.tsx). Components are built with React.forwardRef and share behavior through React context and a large src/internals layer (useRenderElement, field/form context providers, use-button, id and labelable helpers). Positioning for popovers, menus, tooltips, and selects is delegated to a bundled Floating UI integration (src/floating-ui-react) plus @floating-ui/react-dom, while a companion @base-ui/utils package supplies low-level hooks like useControlled, useMergedRefs, and useIsoLayoutEffect.

Tech Stack — The library is written almost entirely in TypeScript (99% of the codebase) and targets React 17, 18, and 19 as peer dependencies. Runtime dependencies are deliberately minimal: @babel/runtime, the internal @base-ui/utils, @floating-ui/react-dom, @floating-ui/utils, and use-sync-external-store. Date-based components pick up optional date-fns peers. Builds run through Lerna/Nx with a modern toolchain (tsgo/TypeScript 6, Vitest 4), and each component ships as its own export path for tree-shaking.

Code Quality — The codebase is thoroughly tested, with roughly 286 test files colocated beside components plus dedicated test/ suites (e2e, regressions, bundle-size). Files follow a consistent, deeply-nested convention (component/part directories, *Context, stateAttributesMapping), state is threaded through typed context, and controlled/uncontrolled behavior is centralized via useControlled. Strict typing, ESLint, Stylelint, and Prettier are enforced across the repo.

API Design — The public API leans on the compound-component pattern (Root, Trigger, Popup, Item, etc.) that mirrors the DOM you render, keeping the surface predictable across widgets. A render prop plus the useRender hook and mergeProps let you swap the underlying element or merge Base UI’s behavior onto your own components, and per-component import paths keep bundles lean. Extensive documentation at base-ui.com and consistent naming make it approachable for anyone familiar with Radix-style primitives, though the headless model means you supply all styling yourself.