Accessible React components we use to build Cal.com, powered by Base UI and styled with Tailwind CSS. Designed for developers and AI, with source code you can make your own.
A set of collapsible panels with headings and content.
A callout for displaying important information.
A dialog that requires user response to proceed.
An input that suggests options as you type.
An image element with a fallback for representing the user.
A badge or a component that looks like a badge.
Displays the path to the current resource using a hierarchy of links.
A button or a component that looks like a button.
A date picker component with range and multi-select support.
A content container for grouping related information.
A control allowing the user to toggle between checked and not checked.
Provides shared state to a series of checkboxes.
A collapsible panel controlled by a button trigger.
An input combined with a list of predefined items to select.
A composer for chat and AI assistant interfaces, with a growing input, persistent actions, and optional mentions or slash commands.
A command palette component built with Dialog and Autocomplete for searching and executing commands.
A menu that appears at the pointer on right click or long press.
A date picker component built with Calendar and Popover.
A popup that opens on top of the entire page.
A panel that slides in from the edge of the screen with swipe gestures, snap points, and nested drawer support.
A container for displaying empty state information.
A component that provides labelling and validation for form controls.
A native fieldset element with a legend.
A form wrapper component that simplifies validation and submission.
A framed container for grouping related information.
A component for visually grouping a series of controls.
A native input element.
A flexible component for grouping inputs with addons, buttons, and other elements.
A component for displaying keyboard keys and shortcuts.
Renders an accessible label associated with controls.
A list of actions in a dropdown, enhanced with keyboard navigation.
A graphical display of a numeric value within a range.
A numeric input element with increment and decrement buttons, and a scrub area.
A segmented input for one-time passwords and verification codes.
A pagination with page navigation, next and previous links.
An accessible popup anchored to a button.
A popup that appears when a link is hovered, showing a preview for sighted users.
Displays the status of a task that takes a long time.
A set of checkable buttons where no more than one of the buttons can be checked at a time.
A native scroll container with custom scrollbars.
A common form component for choosing a predefined value in a dropdown menu.
A visual pattern for presenting related choices, navigation destinations, filters, or content views.
A separator element accessible to screen readers.
A flyout that opens from the side of the screen, based on the dialog component.
A loading state skeleton for your components.
An input where the user selects a value from within a given range.
An indicator that can be used to show a loading state.
A control that indicates whether a setting is on or off.
A simple table component for displaying tabular data.
A component for toggling between related panels on the same page.
A native textarea element.
A temporary notification that appears on screen to inform users.
A two-state button that can be toggled on or off.
Provides a shared state to a series of toggle buttons.
A container for grouping a set of buttons and controls.
A popup that appears when an element is hovered or focused, showing a hint for sighted users.