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