Components
Copy-and-paste components built on Base UI and Tailwind CSS.
Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Alert
Displays a callout for user attention.
Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
Aspect Ratio
Displays content within a desired ratio.
Attachment
Displays a file or image attachment with media, metadata, upload state, and actions.
Avatar
An image element with a fallback for representing the user.
Badge
Displays a badge or a component that looks like a badge.
Breadcrumb
Displays the path to the current resource using a hierarchy of links.
Bubble
Displays conversational content in a message bubble. Supports variants, alignment, grouping, reactions, and collapsible content.
Button
Displays a button or a component that looks like a button.
Button Group
A container that groups related buttons together with consistent styling.
Calendar
A calendar component that allows users to select a date or a range of dates.
Card
Displays a card with header, content, and footer.
Carousel
A carousel with motion and swipe built using Embla.
Chart
Beautiful charts. Built using Recharts. Copy and paste into your apps.
Checkbox
A control that allows the user to toggle between checked and not checked.
Collapsible
An interactive component which expands/collapses a panel.
Combobox
Autocomplete input with a list of suggestions.
Command
Command menu for search and quick actions.
Context Menu
Displays a menu of actions triggered by a right click.
Desktop Window
Wraps content in static macOS, Windows 11, or Ubuntu window chrome.
Dialog
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Drawer
A drawer component for React.
Dropdown Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
Empty
Use the Empty component to display an empty state.
Field
Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
Frame
Displays related content in a structured frame.
Heading
A semantic heading whose visual size can be set independently of its level.
Hover Card
For sighted users to preview content available behind a link.
Input
A text input component for forms and user data entry with built-in styling and accessibility features.
Input Group
Add addons, buttons, and helper content to inputs.
Input OTP
Accessible one-time password component with copy-paste functionality.
Item
A versatile component for displaying content with media, title, description, and actions.
Kbd
Used to display textual user input from keyboard.
Label
Renders an accessible label associated with controls.
Live Waveform
A canvas-based real-time audio waveform visualizer with microphone input and customizable rendering modes.
Marker
Displays an inline status, system note, bordered row, or labeled separator in a conversation.
Menubar
A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
Message
Displays a message in a conversation, with optional avatar, header, footer, and alignment.
Message Scroller
A scroll container for conversational UIs that keeps new messages pinned to the bottom, with a scroll-to-bottom button.
Meter
A linear reading of a bounded value, such as a score, a utilization, or a fill level.
Meter Ring
A radial reading of a bounded value, such as a score, a utilization, or a fill level.
Native Select
A styled native HTML select element with consistent design system integration.
Navigation Menu
A collection of links for navigating websites.
NumberCount
An animated number whose digits roll between values.
Pagination
Pagination with page navigation, next and previous links.
Popover
Displays rich content in a portal, triggered by a button.
Progress
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Progress Ring
A task's progress drawn as a ring, with support for an indeterminate state.
Radio Group
A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
Resizable
Accessible resizable panel groups and layouts with keyboard support.
Scroll Area
Augments native scroll functionality for custom, cross-browser styling.
Select
Displays a list of options for the user to pick from—triggered by a button.
Separator
Visually or semantically separates content.
Sheet
Extends the Dialog component to display content that complements the main content of the screen.
Sidebar
A composable, themeable and customizable sidebar component.
Skeleton
Use to show a placeholder while content is loading.
Slider
An input where the user selects a value from within a given range.
Spinner
An indicator that can be used to show a loading state.
Switch
A control that allows the user to toggle between checked and not checked.
Table
A responsive table component.
Tabs
A set of layered sections of content—known as tab panels—that are displayed one at a time.
Textarea
Displays a form textarea or a component that looks like a textarea.
Timeline
A visual representation of events in chronological order.
Toast
A succinct message that is displayed temporarily.
Toggle
A two-state button that can be either on or off.
Toggle Group
A set of two-state buttons that can be toggled on or off.
Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.