# 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](https://deploy-preview-3939--base-ui.netlify.app/react/overview/quick-start.md): A quick guide to getting started with Base UI. - [Accessibility](https://deploy-preview-3939--base-ui.netlify.app/react/overview/accessibility.md): Learn how to make the most of Base UI's accessibility features and guidelines. - [Releases](https://deploy-preview-3939--base-ui.netlify.app/react/overview/releases.md): Changelogs for each Base UI release. - [About Base UI](https://deploy-preview-3939--base-ui.netlify.app/react/overview/about.md): An overview of Base UI, providing information on its history, team, and goals. ## Handbook - [Styling](https://deploy-preview-3939--base-ui.netlify.app/react/handbook/styling.md): Learn how to style Base UI components with your preferred styling engine. - [Animation](https://deploy-preview-3939--base-ui.netlify.app/react/handbook/animation.md): A guide to animating Base UI components. - [Composition](https://deploy-preview-3939--base-ui.netlify.app/react/handbook/composition.md): A guide to composing Base UI components with your own React components. - [Customization](https://deploy-preview-3939--base-ui.netlify.app/react/handbook/customization.md): A guide to customizing the behavior of Base UI components. - [Forms](https://deploy-preview-3939--base-ui.netlify.app/react/handbook/forms.md): A guide to building forms with Base UI components. - [TypeScript](https://deploy-preview-3939--base-ui.netlify.app/react/handbook/typescript.md): A guide to using TypeScript with Base UI. ## Components - [Accordion](https://deploy-preview-3939--base-ui.netlify.app/react/components/accordion.md): A high-quality, unstyled React accordion component that displays a set of collapsible panels with headings. - [Alert Dialog](https://deploy-preview-3939--base-ui.netlify.app/react/components/alert-dialog.md): A high-quality, unstyled React alert dialog component that requires a user response to proceed. - [Autocomplete](https://deploy-preview-3939--base-ui.netlify.app/react/components/autocomplete.md): A high-quality, unstyled React autocomplete component that renders an input with a list of filtered options. - [Avatar](https://deploy-preview-3939--base-ui.netlify.app/react/components/avatar.md): A high-quality, unstyled React avatar component that is easy to customize. - [Button](https://deploy-preview-3939--base-ui.netlify.app/react/components/button.md): A high-quality, unstyled React button component that can be rendered as another tag or focusable when disabled. - [Checkbox](https://deploy-preview-3939--base-ui.netlify.app/react/components/checkbox.md): A high-quality, unstyled React checkbox component that is easy to customize. - [Checkbox Group](https://deploy-preview-3939--base-ui.netlify.app/react/components/checkbox-group.md): A high-quality, unstyled React checkbox group component that provides a shared state for a series of checkboxes. - [Collapsible](https://deploy-preview-3939--base-ui.netlify.app/react/components/collapsible.md): A high-quality, unstyled React collapsible component that displays a panel controlled by a button. - [Combobox](https://deploy-preview-3939--base-ui.netlify.app/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](https://deploy-preview-3939--base-ui.netlify.app/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](https://deploy-preview-3939--base-ui.netlify.app/react/components/dialog.md): A high-quality, unstyled React dialog component that opens on top of the entire page. - [Field](https://deploy-preview-3939--base-ui.netlify.app/react/components/field.md): A high-quality, unstyled React field component that provides labeling and validation for form controls. - [Fieldset](https://deploy-preview-3939--base-ui.netlify.app/react/components/fieldset.md): A high-quality, unstyled React fieldset component with an easily stylable legend. - [Form](https://deploy-preview-3939--base-ui.netlify.app/react/components/form.md): A high-quality, unstyled React form component with consolidated error handling. - [Input](https://deploy-preview-3939--base-ui.netlify.app/react/components/input.md): A high-quality, unstyled React input component. - [Menu](https://deploy-preview-3939--base-ui.netlify.app/react/components/menu.md): A high-quality, unstyled React menu component that displays list of actions in a dropdown, enhanced with keyboard navigation. - [Menubar](https://deploy-preview-3939--base-ui.netlify.app/react/components/menubar.md): A menu bar providing commands and options for your application. - [Meter](https://deploy-preview-3939--base-ui.netlify.app/react/components/meter.md): A high-quality, unstyled React meter component that provides a graphical display of a numeric value. - [Navigation Menu](https://deploy-preview-3939--base-ui.netlify.app/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](https://deploy-preview-3939--base-ui.netlify.app/react/components/number-field.md): A high-quality, unstyled React number field component with increment and decrement buttons, and a scrub area. - [Popover](https://deploy-preview-3939--base-ui.netlify.app/react/components/popover.md): A high-quality, unstyled React popover component that displays an accessible popup anchored to a button. - [Preview Card](https://deploy-preview-3939--base-ui.netlify.app/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](https://deploy-preview-3939--base-ui.netlify.app/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](https://deploy-preview-3939--base-ui.netlify.app/react/components/radio.md): A high-quality, unstyled React radio button component that is easy to style. - [Scroll Area](https://deploy-preview-3939--base-ui.netlify.app/react/components/scroll-area.md): A high-quality, unstyled React scroll area that provides a native scroll container with custom scrollbars. - [Select](https://deploy-preview-3939--base-ui.netlify.app/react/components/select.md): A high-quality, unstyled React select component for choosing a predefined value in a dropdown menu. - [Separator](https://deploy-preview-3939--base-ui.netlify.app/react/components/separator.md): A high-quality, unstyled React separator component that is accessible to screen readers. - [Slider](https://deploy-preview-3939--base-ui.netlify.app/react/components/slider.md): A high-quality, unstyled React slider component that works like a range input and is easy to style. - [Switch](https://deploy-preview-3939--base-ui.netlify.app/react/components/switch.md): A high-quality, unstyled React switch component that indicates whether a setting is on or off. - [Tabs](https://deploy-preview-3939--base-ui.netlify.app/react/components/tabs.md): A high-quality, unstyled React tabs component for toggling between related panels on the same page. - [Toast](https://deploy-preview-3939--base-ui.netlify.app/react/components/toast.md): A high-quality, unstyled React toast component to generate notifications. - [Toggle](https://deploy-preview-3939--base-ui.netlify.app/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](https://deploy-preview-3939--base-ui.netlify.app/react/components/toggle-group.md): A high-quality, unstyled React toggle group component that provides shared state to a series of toggle buttons. - [Toolbar](https://deploy-preview-3939--base-ui.netlify.app/react/components/toolbar.md): A high-quality, unstyled React toolbar component that groups a set of buttons and controls. - [Tooltip](https://deploy-preview-3939--base-ui.netlify.app/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](https://deploy-preview-3939--base-ui.netlify.app/react/utils/csp-provider.md): A CSP provider component that applies a nonce to inline