# Base UI

This is the documentation for the `@base-ui-components/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.

## Overview

- [Quick start](https://deploy-preview-2369--base-ui.netlify.app/react/overview/quick-start.md): A quick guide to getting started with Base UI.
- [Accessibility](https://deploy-preview-2369--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-2369--base-ui.netlify.app/react/overview/releases.md): Changelogs for each Base UI release.
- [About Base UI](https://deploy-preview-2369--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-2369--base-ui.netlify.app/react/handbook/styling.md): Learn how to style Base UI components with your preferred styling engine.
- [Animation](https://deploy-preview-2369--base-ui.netlify.app/react/handbook/animation.md): A guide to animating Base UI components.
- [Composition](https://deploy-preview-2369--base-ui.netlify.app/react/handbook/composition.md): A guide to composing Base UI components with your own React components.

## Components

- [Accordion](https://deploy-preview-2369--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-2369--base-ui.netlify.app/react/components/alert-dialog.md): A high-quality, unstyled React alert dialog component that requires user response to proceed.
- [Avatar](https://deploy-preview-2369--base-ui.netlify.app/react/components/avatar.md): A high-quality, unstyled React avatar component that is easy to customize.
- [Checkbox](https://deploy-preview-2369--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-2369--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-2369--base-ui.netlify.app/react/components/collapsible.md): A high-quality, unstyled React collapsible component that displays a panel controlled by a button.
- [Context Menu](https://deploy-preview-2369--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-2369--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-2369--base-ui.netlify.app/react/components/field.md): A high-quality, unstyled React field component that provides labelling and validation for form controls.
- [Fieldset](https://deploy-preview-2369--base-ui.netlify.app/react/components/fieldset.md): A high-quality, unstyled React fieldset component with an easily stylable legend.
- [Form](https://deploy-preview-2369--base-ui.netlify.app/react/components/form.md): A high-quality, unstyled React form component with consolidated error handling.
- [Input](https://deploy-preview-2369--base-ui.netlify.app/react/components/input.md): A high-quality, unstyled React input component.
- [Menu](https://deploy-preview-2369--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-2369--base-ui.netlify.app/react/components/menubar.md): A menu bar providing commands and options for your application.
- [Meter](https://deploy-preview-2369--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-2369--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-2369--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-2369--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-2369--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-2369--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-2369--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-2369--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-2369--base-ui.netlify.app/react/components/select.md): A high-quality, unstyled React select component that allows you for choosing a predefined value in a dropdown menu.
- [Separator](https://deploy-preview-2369--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-2369--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-2369--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-2369--base-ui.netlify.app/react/components/tabs.md): A high-quality, unstyled React scroll area that provides a native scroll container with custom scrollbars.
- [Toast](https://deploy-preview-2369--base-ui.netlify.app/react/components/toast.md): A high-quality, unstyled React toast component to generate notifications.
- [Toggle](https://deploy-preview-2369--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-2369--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-2369--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-2369--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

- [Direction Provider](https://deploy-preview-2369--base-ui.netlify.app/react/utils/direction-provider.md): A direction provider component that enables RTL behavior for Base UI components.
- [useRender](https://deploy-preview-2369--base-ui.netlify.app/react/utils/use-render.md): Hook for enabling a render prop in custom components.