Theme
Customize appearance
Documentation
Introduction
A collection of 66 editable React components built with Base UI and Tailwind CSS. Explore an example, install its source, and adapt it to your product.
Start building
Choose a component in the sidebar to see its purpose, a live preview, installation command, and a working usage example. The files are installed into your project, so every detail can be changed.
Installation guide →Components
Accordion
Reveal related sections without leaving the page.
Alert
Keep an important status message visible within the page.
Alert Dialog
Ask for confirmation before an important action.
Aspect Ratio
Reserve a predictable shape for images, video, or other media.
Attachment
Present a file with its name, details, and optional actions.
Avatar
Identify a person or team with an image and fallback initials.
Badge
Label an item with a compact status or category.
Breadcrumb
Show the hierarchy leading to the current page.
Bubble
Group a short conversational message into a visual bubble.
Button
Trigger an action or give a link the appearance of a button.
Button Group
Arrange related actions as a single visual group.
Calendar
Choose a date or explore a month using a calendar grid.
Card
Organize related content and actions into a contained surface.
Carousel
Move through a sequence of slides in a limited space.
Chart
Render data visualizations with shared theme colors and tooltips.
Checkbox
Toggle an independent choice or select several options.
Collapsible
Reveal an optional region of content on demand.
Combobox
Search a list of choices and select a matching value.
Command
Filter and execute actions from a keyboard-friendly list.
Context Menu
Show contextual actions for a right-clicked element.
Data Table
Render typed records using a reusable TanStack Table v9 composition.
Date Picker
Choose a date from a calendar inside a popover.
Dialog
Focus attention on a task in a modal window.
Direction
Provide text direction to components that support right-to-left layouts.
Drawer
Present supporting content in a panel that enters from an edge.
Dropdown Menu
Offer a compact list of actions from a trigger.
Empty
Explain why a collection has no content and offer a next step.
Field
Lay out a label, control, description, and validation feedback.
Form
Connect React Hook Form state with accessible labels and validation messages.
Hover Card
Reveal supporting information when a trigger is hovered or focused.
Input
Collect a single line of text using a styled input.
Input Group
Attach labels, icons, or actions to a text control.
Input Otp
Collect a short verification code in visually separated slots.
Item
Lay out a compact row of content with optional media and actions.
Kbd
Display a key or keyboard shortcut within explanatory text.
Label
Associate a clear text label with a form control.
Marker
Mark a boundary or moment in a feed or conversation.
Menubar
Expose groups of commands in a desktop-style menu bar.
Message
Structure a conversation entry with an author, content, and metadata.
Message Scroller
Keep a conversation scrollable as messages are added.
Native Select
Use the browser’s built-in select control with consistent styling.
Navigation Menu
Organize primary navigation links and optional content panels.
Pagination
Move between pages of a larger collection.
Popover
Show contextual content in an anchored floating panel.
Progress
Represent the completion of a measurable task.
Questionnaire
Guide a user through a structured set of questions.
Radio Group
Choose one option from a set of mutually exclusive values.
Resizable
Let users adjust the space allocated to neighboring panels.
Scroll Area
Contain overflowing content within a styled scroll region.
Select
Choose one value from a custom popup list.
Separator
Separate groups of related content visually.
Sheet
Open a supporting panel from the side of the screen.
Sidebar
Build persistent navigation with a responsive mobile panel.
Skeleton
Reserve space while content is loading.
Slider
Adjust a numeric value by dragging or using the keyboard.
Sonner
Show temporary notifications through the Sonner toast system.
Spinner
Indicate that an operation is still running.
Switch
Turn a setting on or off immediately.
Table
Display structured rows and columns with semantic HTML.
Tabs
Switch between related panels within the same page.
Textarea
Collect longer text that may span several lines.
Toast
Display transient notifications with the Base UI toast manager.
Toggle
Represent a button that can remain pressed.
Toggle Group
Collect related pressed-state choices into a single group.
Tooltip
Explain a control with short text on hover or focus.
Typography
Build a consistent hierarchy using semantic text components.