Base UI Documentation

Base UI is an unstyled, headless React component library designed for building accessible user interfaces. Key characteristics include:

• Headless: Components are unstyled and do not bundle CSS. They are compatible with any styling engine, including Tailwind, CSS Modules, plain CSS, or CSS-in-JS.
• Accessible: Components adhere to WAI-ARIA design patterns and are tested across various platforms, devices, and screen readers.
• Composable: Component APIs are fully open, providing direct access to nodes and allowing you to add, remove, or wrap parts of the component easily.

Base UI provides a collection of unstyled, accessible components and utilities for React applications. The documentation is organized into four main areas:

• Overview: Quick start guides, accessibility standards, and release information.
• Handbook: Guidance on styling, animation, composition, customization, forms, and TypeScript integration.
• Components: A comprehensive library of unstyled components including Accordion, Autocomplete, Button, Dialog, Menu, Select, Tabs, and more.
• Utils: Core utilities such as mergeProps, useRender, and various Providers (CSP, Direction).

The Combobox is an input combined with a list of predefined items for selection. It supports various modes including single/multiple selection, async search, grouping, and virtualization. It is highly customizable through a modular component architecture.

Key Features

• Selection Modes: Single select, multiple select (using Chips), and creatable items.
• Search: Built-in filtering and support for asynchronous data fetching.
• Layout: Highly flexible anatomy including Popups, Portals, Backdrops, and Positioners.
• Accessibility: Designed to be an accessible, filterable select/typeahead component.

Base UI components adhere to WAI-ARIA Authoring Practices to provide keyboard accessibility out of the box. Many components support standard navigation keys including:

• Arrow keys
• Alphanumeric keys
• <kbd>Home</kbd>
• <kbd>End</kbd>
• <kbd>Enter</kbd>
• <kbd>Esc</kbd>

While Base UI is primarily for React, there are unofficial ports available for other frameworks:

• SolidJS: base-ui-solid
• Vue: base-ui-vue
• Angular: radix-ng (an adaptation of Base UI architecture and behavior)

Several open-source styled libraries are built using Base UI as a foundation. Notable examples include:

• Kumo: Cloudflare's component library.
• coss ui: A modern UI library built by the creators of cal.com.
• Fragments: A design system platform.
• 9ui: Copy-paste components.
• Prototyper UI: Components designed for agentic composition.
• Lumi UI: Composable React components.
• Olyx UI: Components styled with native CSS and HCT color system.
• ReUI: A collection of components and templates built on shadcn/ui.
• Fig UI: Figma UI3 style components for Figma plugins.
• Selia: Components designed for visual cohesion.