---

name: base-ui description: This skills tells you how to access docs of Base UI. Base UI is a React component library focused on accessibility, performance, and developer experience.

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.

Overview

• Quick start: A quick guide to getting started with Base UI.
• Accessibility: Learn how to make the most of Base UI's accessibility features and guidelines.
• Releases: Changelogs for each Base UI release.
• About Base UI: An overview of Base UI, providing information on its history, team, and goals.

Handbook

• Styling: Learn how to style Base UI components with your preferred styling engine.
• Animation: A guide to animating Base UI components.
• Composition: A guide to composing Base UI components with your own React components.
• Customization: A guide to customizing the behavior of Base UI components.
• Forms: A guide to building forms with Base UI components.
• TypeScript: A guide to using TypeScript with Base UI.

Components

• Accordion: A high-quality, unstyled React accordion component that displays a set of collapsible panels with headings.
• Alert Dialog: A high-quality, unstyled React alert dialog component that requires a user response to proceed.
• Autocomplete: A high-quality, unstyled React autocomplete component that renders an input with a list of filtered options.
• Avatar: A high-quality, unstyled React avatar component that is easy to customize.
• Button: A high-quality, unstyled React button component that can be rendered as another tag or focusable when disabled.
• Checkbox: A high-quality, unstyled React checkbox component that is easy to customize.
• Checkbox Group: A high-quality, unstyled React checkbox group component that provides a shared state for a series of checkboxes.
• Collapsible: A high-quality, unstyled React collapsible component that displays a panel controlled by a button.
• Combobox: A high-quality, unstyled React combobox component that renders an input combined with a list of predefined items to select.
• Context Menu: A high-quality, unstyled React context menu component that appears at the pointer on right click or long press.
• Dialog: A high-quality, unstyled React dialog component that opens on top of the entire page.
• Field: A high-quality, unstyled React field component that provides labeling and validation for form controls.
• Fieldset: A high-quality, unstyled React fieldset component with an easily stylable legend.
• Form: A high-quality, unstyled React form component with consolidated error handling.
• Input: A high-quality, unstyled React input component.
• Menu: A high-quality, unstyled React menu component that displays list of actions in a dropdown, enhanced with keyboard navigation.
• Menubar: A menu bar providing commands and options for your application.
• Meter: A high-quality, unstyled React meter component that provides a graphical display of a numeric value.
• Navigation Menu: A high-quality, unstyled React navigation menu component that displays a collection of links and menus for website navigation.
• Number Field: A high-quality, unstyled React number field component with increment and decrement buttons, and a scrub area.
• Popover: A high-quality, unstyled React popover component that displays an accessible popup anchored to a button.
• Preview Card: A high-quality, unstyled React preview card component that appears when a link is hovered, showing a preview for sighted users.
• Progress: A high-quality, unstyled React progress bar component that displays the status of a task that takes a long time.
• Radio: A high-quality, unstyled React radio button component that is easy to style.
• Scroll Area: A high-quality, unstyled React scroll area that provides a native scroll container with custom scrollbars.
• Select: A high-quality, unstyled React select component for choosing a predefined value in a dropdown menu.
• Separator: A high-quality, unstyled React separator component that is accessible to screen readers.
• Slider: A high-quality, unstyled React slider component that works like a range input and is easy to style.
• Switch: A high-quality, unstyled React switch component that indicates whether a setting is on or off.
• Tabs: A high-quality, unstyled React tabs component for toggling between related panels on the same page.
• Toast: A high-quality, unstyled React toast component to generate notifications.
• Toggle: A high-quality, unstyled React toggle component that displays a two-state button that can be on or off.
• Toggle Group: A high-quality, unstyled React toggle group component that provides shared state to a series of toggle buttons.
• Toolbar: A high-quality, unstyled React toolbar component that groups a set of buttons and controls.
• Tooltip: 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: A CSP provider component that applies a nonce to inline and tags rendered by Base UI components, and can disable inline elements.
• Direction Provider: A direction provider component that enables RTL behavior for Base UI components.
• mergeProps: A utility to merge multiple sets of React props, handling event handlers, className, and style props intelligently.
• useRender: Hook for enabling a render prop in custom components.