Components
65 components on Base UI, styled with yea tokens.
Actions
Forms
- InputSingle-line text input.
- TextareaMulti-line text input.
- CheckboxToggles a single boolean option.
- Radio GroupPicks one option from a set.
- SwitchToggles a setting on or off.
- SelectPicks one option from a dropdown list.
- Native SelectStyled native select element.
- ComboboxText input with a filtered list of options.
- SliderPicks a value or range by dragging.
- Input OTPSegmented input for one-time codes.
- Input GroupInput with leading and trailing addons such as text or buttons.
- FieldLabel, control, description and error laid out as one form field.
- LabelAccessible caption for a form control.
Overlays
- DialogModal window layered over the page.
- Alert DialogModal that interrupts the user to confirm a destructive action.
- SheetSide panel that slides in from an edge.
- DrawerBottom panel that can be swiped away.
- PopoverFloating panel anchored to a trigger.
- TooltipShort hint shown on hover or focus.
- Hover CardPreview card shown when hovering a link.
- CommandSearchable command palette, inline or in a dialog.
Menus
Navigation
Feedback
- AlertInline message with a title, description and optional action.
- ToastBrief notification that appears and dismisses itself.
- ProgressBar showing completion of a task.
- SpinnerIndeterminate loading indicator.
- SkeletonLoading placeholder shaped like the content it replaces.
- EmptyPlaceholder for lists and views with no content yet.
Data display
- CardSurface for grouping related content with optional media.
- BadgeSmall label for status, counts or categories.
- AvatarUser or app image with a text fallback.
- TableRows and columns of data.
- Data TableTanStack Table wrapper with sorting and pagination.
- ItemList row with media, content and actions.
- KbdKeyboard key or shortcut.
- SeparatorHorizontal or vertical divider.
- TypographyHeadings, paragraphs and inline text styles.
Layout & media
- Aspect RatioKeeps content at a fixed width-to-height ratio.
- Scroll AreaCustom scrollbars for overflowing content.
- ResizablePanels separated by draggable handles.
- CollapsibleShows and hides a block of content with an animated height.
- AccordionStacked sections that expand one at a time or together.
- CarouselHorizontal slides with spring-driven navigation.
- ChartRecharts wrapper styled with yea tokens.
Date
Chat
- MessageChat message layout with avatar, content and footer.
- Message ScrollerScrolling chat viewport that follows new messages.
- BubbleChat bubble with alignment, grouping and reactions.
- AttachmentFile and media attachments with upload state and actions.
- MarkerTimeline marker with an icon and optional divider.
- QuestionnaireMulti-step form flow with progress and navigation.