Foundations
Base UI primitives with the JDS look. The agent and voice components are built on them, and the CLI installs the ones a component needs on its own.
You rarely add these by hand. They're here when you want a menu, dialog or field that matches the rest of your agent UI.
- AccordionStacked sections that expand one or several at a time.
- AlertA callout for status or warnings, inline with content.
- Alert DialogA modal that interrupts to confirm a destructive action.
- AvatarAn image with a text fallback for users and agents.
- BadgeA small status label.
- BreadcrumbWhere you are in a hierarchy, with links back up.
- ButtonA button or a component that looks like a button.
- CalendarA month grid for picking a date or range.
- CardA container for grouped content.
- CarouselSwipe or step through a row of cards.
- CheckboxAn on/off choice, usually in a list of settings.
- CollapsibleShows and hides a panel.
- ComboboxA text input that filters a list of options as you type.
- CommandA searchable command palette with groups and shortcuts.
- Context MenuActions on right-click or long press.
- DialogA modal window over the page.
- DrawerA panel that slides up from the bottom and can be swiped away.
- EmptyA placeholder for empty states, with a next step.
- FieldLabel, control, description and error, laid out consistently.
- FormConsistent form layout with native validation, built on Base UI Form.
- Hover CardA rich preview when hovering a link or mention.
- InputA single-line text field.
- Input GroupAn input with icons, text or buttons attached.
- Input OTPOne-time code entry, one character per slot.
- KbdA keyboard key or shortcut.
- LabelAccessible text for a form control.
- MenuA list of actions in a dropdown.
- MenubarA desktop-style bar of menus.
- MeterA measurement within a known range, like quota used.
- Nav SidebarApp navigation beside the page: docked, floating or inset. Collapses to a rail of icons or slides out, can peek open on hover, and becomes an overlay on narrow layouts.
- Navigation MenuTop-level site navigation with rich dropdowns.
- Number FieldA numeric input with steppers, arrow keys and drag-to-scrub.
- PaginationMove between pages of results.
- PopoverA floating panel anchored to a trigger.
- ProgressCompletion of a known-length task.
- Radio GroupPick exactly one of a few options.
- ResizablePanels the user can resize by dragging the divider.
- Scroll AreaA scroll container with styled scrollbars.
- SelectPick one value from a list.
- SeparatorA visual divider.
- SheetA panel that slides in from an edge. Can render inside a container, non-modal.
- SkeletonA placeholder while content loads.
- SliderChoose a value within a range.
- SpinnerIndeterminate loading indicator.
- SwitchTurn a setting on or off, taking effect immediately.
- TableRows and columns of structured data.
- TabsSwitch between related views.
- TextareaA multi-line text field that grows with content.
- ToastBrief notifications, via Sonner.
- ToggleA button that stays pressed.
- Toggle GroupA set of toggles, single or multiple choice.
- ToolbarA row of controls with arrow-key navigation between them.
- TooltipA label on hover or focus.