Base UI Components
Internal test page showcasing all Base UI components
Colors
Design system color tokens that adapt to light and dark themes
Core UI
Base colors for backgrounds and surfaces
Semantic Colors
Primary, secondary, and state colors
Chart Colors
Data visualization palette
Sidebar
Navigation sidebar colors
Separator
Visually or semantically separates content
Horizontal separator
Content below separator
Label
Renders an accessible label associated with controls
Avatar
An image element with a fallback for representing the user
Checkbox
A control that allows the user to toggle between checked and not checked
Switch
A control that allows the user to toggle between on and off
Radio Group
A set of checkable buttons where only one can be checked at a time
Slider
An input where the user selects a value from within a given range
Progress
Displays an indicator showing the completion progress
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
Accordion
A vertically stacked set of interactive headings that reveal content
Collapsible
An interactive component which expands/collapses a panel
Tabs
A set of layered sections of content that display one panel at a time
Account settings and profile information.
Tooltip
A popup that displays information related to an element when focused or hovered
Hover Card
For sighted users to preview content available behind a link
Popover
Displays rich content in a portal, triggered by a button
Dialog
A window overlaid on either the primary window or another dialog
Alert Dialog
A modal dialog that interrupts the user with important content
Dropdown Menu
Displays a menu to the user triggered by a button
Button
Displays a button or a component that looks like a button
Select
Choose a predefined value from a dropdown list
Combobox
A filterable input combined with a list of items
Number Field
A numeric input with increment and decrement controls
Textarea
A multi-line text input
Visible on your public profile.
Field
Labeling and validation for form controls
Used to sign in and appear in your URL.
Checkbox Group
Shared state for a series of checkboxes
Toolbar
A group of controls for a related task
Context Menu
A menu opened by right-clicking an area
Meter
A graphical display of a value within a known range
Toast
A brief message that appears after an action
Sheet
A panel that slides in from the edge of the screen
Card
A container for related content
Deployed to the production environment.
Breadcrumb
A trail of links to the current page
Scroll Area
A viewport with overflow scrolling
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Skeleton
A placeholder shown while content loads
Autocomplete
An input that suggests options as you type
OTP Field
A one-time password input with one slot per character
Fieldset
A native fieldset with a stylable legend
Form
A native form with consolidated field errors
Menubar
A menu bar for application commands
Navigation Menu
A collection of links and menus for site navigation
Drawer
A panel that slides in from the edge of the screen