# Base UI

This is the documentation for the `@base-ui/react` package.
It contains a collection of components and utilities for building user interfaces in React.
The library is designed to be composable and styling agnostic.
The Tailwind CSS examples are written for Tailwind CSS v4. If `package.json` uses Tailwind CSS v3, automatically convert unsupported styles to v3-compatible equivalents.

## Overview

- [Quick start](./react/overview/quick-start.md): A quick guide to getting started with Base UI.
- [Accessibility](./react/overview/accessibility.md): Learn how to make the most of Base UI's accessibility features and guidelines.
- [Releases](./react/overview/releases.md):
- [About Base UI](./react/overview/about.md): An overview of Base UI, providing information on its history, team, and goals.
- [Community](./react/overview/community.md): Learn how to use Base UI with styles, where to get help, how to stay up to date, and how to contribute.
- [v1.0.0](./react/overview/releases/v1-0-0.md): v1.0.0 release notes. Dec 11, 2025.
- [v1.0.0-alpha.4](./react/overview/releases/v1-0-0-alpha-4.md): v1.0.0-alpha.4 release notes. Dec 17, 2024.
- [v1.0.0-alpha.5](./react/overview/releases/v1-0-0-alpha-5.md): v1.0.0-alpha.5 release notes. Jan 10, 2025.
- [v1.0.0-alpha.6](./react/overview/releases/v1-0-0-alpha-6.md): v1.0.0-alpha.6 release notes. Feb 6, 2025.
- [v1.0.0-alpha.7](./react/overview/releases/v1-0-0-alpha-7.md): v1.0.0-alpha.7 release notes. Mar 20, 2025.
- [v1.0.0-alpha.8](./react/overview/releases/v1-0-0-alpha-8.md): v1.0.0-alpha.8 release notes. Apr 17, 2025.
- [v1.0.0-beta.0](./react/overview/releases/v1-0-0-beta-0.md): v1.0.0-beta.0 release notes. May 29, 2025.
- [v1.0.0-beta.1](./react/overview/releases/v1-0-0-beta-1.md): v1.0.0-beta.1 release notes. Jul 1, 2025.
- [v1.0.0-beta.2](./react/overview/releases/v1-0-0-beta-2.md): v1.0.0-beta.2 release notes. Jul 30, 2025.
- [v1.0.0-beta.3](./react/overview/releases/v1-0-0-beta-3.md): v1.0.0-beta.3 release notes. Sep 3, 2025.
- [v1.0.0-beta.4](./react/overview/releases/v1-0-0-beta-4.md): v1.0.0-beta.4 release notes. Oct 1, 2025.
- [v1.0.0-beta.5](./react/overview/releases/v1-0-0-beta-5.md): v1.0.0-beta.5 release notes. Nov 17, 2025.
- [v1.0.0-beta.6](./react/overview/releases/v1-0-0-beta-6.md): v1.0.0-beta.6 release notes. Nov 17, 2025.
- [v1.0.0-beta.7](./react/overview/releases/v1-0-0-beta-7.md): v1.0.0-beta.7 release notes. Nov 27, 2025.
- [v1.0.0-rc.0](./react/overview/releases/v1-0-0-rc-0.md): v1.0.0-rc.0 release notes. Dec 4, 2025.
- [v1.0.0-rc.1](./react/overview/releases/v1-0-0-rc-1.md): v1.0.0-rc.1 release notes. Dec 11, 2025.
- [v1.0.0-rc.2](./react/overview/releases/v1-0-0-rc-2.md): v1.0.0-rc.2 release notes. Dec 11, 2025.
- [v1.1.0](./react/overview/releases/v1-1-0.md): v1.1.0 release notes. Jan 15, 2026.
- [v1.2.0](./react/overview/releases/v1-2-0.md): v1.2.0 release notes. Feb 12, 2026.
- [v1.3.0](./react/overview/releases/v1-3-0.md): v1.3.0 release notes. Mar 12, 2026.
- [v1.4.0](./react/overview/releases/v1-4-0.md): v1.4.0 release notes. Apr 13, 2026.
- [v1.4.1](./react/overview/releases/v1-4-1.md): v1.4.1 release notes. Apr 20, 2026.
- [v1.5.0](./react/overview/releases/v1-5-0.md): v1.5.0 release notes. May 19, 2026.
- [v1.6.0](./react/overview/releases/v1-6-0.md): v1.6.0 release notes. Jun 18, 2026.

## Handbook

- [Styling](./react/handbook/styling.md): Learn how to style Base UI components with your preferred styling engine.
- [Animation](./react/handbook/animation.md): A guide to animating Base UI components.
- [Composition](./react/handbook/composition.md): A guide to composing Base UI components with your own React components.
- [Customization](./react/handbook/customization.md): A guide to customizing the behavior of Base UI components.
- [Forms](./react/handbook/forms.md): A guide to building forms with Base UI components.
- [TypeScript](./react/handbook/typescript.md): A guide to using TypeScript with Base UI.

## Components

- [Accordion](./react/components/accordion.md): A high-quality, unstyled React accordion component that displays a set of collapsible panels with headings.
- [Alert Dialog](./react/components/alert-dialog.md): A high-quality, unstyled React alert dialog component that requires a user response to proceed.
- [Autocomplete](./react/components/autocomplete.md): A high-quality, unstyled React autocomplete component that renders an input with a list of filtered options.
- [Avatar](./react/components/avatar.md): A high-quality, unstyled React avatar component that is easy to customize.
- [Button](./react/components/button.md): A high-quality, unstyled React button component that can be rendered as another tag or focusable when disabled.
- [Checkbox](./react/components/checkbox.md): A high-quality, unstyled React checkbox component that is easy to customize.
- [Checkbox Group](./react/components/checkbox-group.md): A high-quality, unstyled React checkbox group component that provides a shared state for a series of checkboxes.
- [Collapsible](./react/components/collapsible.md): A high-quality, unstyled React collapsible component that displays a panel controlled by a button.
- [Combobox](./react/components/combobox.md): A high-quality, unstyled React combobox component that renders an input combined with a list of predefined items to select.
- [Context Menu](./react/components/context-menu.md): A high-quality, unstyled React context menu component that appears at the pointer on right click or long press.
- [Dialog](./react/components/dialog.md): A high-quality, unstyled React dialog component that opens on top of the entire page.
- [Drawer](./react/components/drawer.md): A high-quality, unstyled React drawer component with swipe-to-dismiss gestures.
- [Field](./react/components/field.md): A high-quality, unstyled React field component that provides labeling and validation for form controls.
- [Fieldset](./react/components/fieldset.md): A high-quality, unstyled React fieldset component with an easily stylable legend.
- [Form](./react/components/form.md): A high-quality, unstyled React form component with consolidated error handling.
- [Input](./react/components/input.md): A high-quality, unstyled React input component.
- [Menu](./react/components/menu.md): A high-quality, unstyled React menu component that displays list of actions in a dropdown, enhanced with keyboard navigation.
- [Menubar](./react/components/menubar.md): A menu bar providing commands and options for your application.
- [Meter](./react/components/meter.md): A high-quality, unstyled React meter component that provides a graphical display of a numeric value.
- [Navigation Menu](./react/components/navigation-menu.md): A high-quality, unstyled React navigation menu component that displays a collection of links and menus for website navigation.
- [Number Field](./react/components/number-field.md): A high-quality, unstyled React number field component with increment and decrement buttons, and a scrub area.
- [OTP Field](./react/components/otp-field.md): A high-quality, unstyled React OTP field component for one-time password and verification code entry.
- [Popover](./react/components/popover.md): A high-quality, unstyled React popover component that displays an accessible popup anchored to a button.
- [Preview Card](./react/components/preview-card.md): A high-quality, unstyled React preview card component that appears when a link is hovered, showing a preview for sighted users.
- [Progress](./react/components/progress.md): A high-quality, unstyled React progress bar component that displays the status of a task that takes a long time.
- [Radio](./react/components/radio.md): A high-quality, unstyled React radio button component that is easy to style.
- [Scroll Area](./react/components/scroll-area.md): A high-quality, unstyled React scroll area that provides a native scroll container with custom scrollbars.
- [Select](./react/components/select.md): A high-quality, unstyled React select component for choosing a predefined value in a dropdown menu.
- [Separator](./react/components/separator.md): A high-quality, unstyled React separator component that is accessible to screen readers.
- [Slider](./react/components/slider.md): A high-quality, unstyled React slider component that works like a range input and is easy to style.
- [Switch](./react/components/switch.md): A high-quality, unstyled React switch component that indicates whether a setting is on or off.
- [Tabs](./react/components/tabs.md): A high-quality, unstyled React tabs component for toggling between related panels on the same page.
- [Toast](./react/components/toast.md): A high-quality, unstyled React toast component to generate notifications.
- [Toggle](./react/components/toggle.md): A high-quality, unstyled React toggle component that displays a two-state button that can be on or off.
- [Toggle Group](./react/components/toggle-group.md): A high-quality, unstyled React toggle group component that provides shared state to a series of toggle buttons.
- [Toolbar](./react/components/toolbar.md): A high-quality, unstyled React toolbar component that groups a set of buttons and controls.
- [Tooltip](./react/components/tooltip.md): A high-quality, unstyled React tooltip component that appears when an element is hovered or focused, showing a hint for sighted users.

## Utilities

- [CSP Provider](./react/utils/csp-provider.md): A CSP provider component that applies a nonce to inline `<style>` and `<script>` tags rendered by Base UI components, and can disable inline `<style>` elements.
- [Direction Provider](./react/utils/direction-provider.md): A direction provider component that enables RTL behavior for Base UI components.
- [mergeProps](./react/utils/merge-props.md): A utility to merge multiple sets of React props, handling event handlers, className, and style props intelligently.
- [useRender](./react/utils/use-render.md): Hook for enabling a render prop in custom components.
