Navigated to /docs/ui/components

UI components

Browse and filter the 80 canonical public Tavo.js web components.

80 components

feedback

Alert

Inline status message for success, warning, danger, and info states.

View component →
layout

AppBar

Top application bar for navigation and product actions.

View component →
layout

AspectRatio

Fixed-ratio media and content frame primitive.

View component →
content

Avatar

User or entity avatar with image, initials, and fallback rendering.

View component →
layout

Box

Generic token-backed layout and surface primitive.

View component →
navigation

Breadcrumbs

Page hierarchy navigation with current-page semantics.

View component →
forms

Button

Action control with solid, soft, outline, and ghost variants.

View component →
forms

ButtonGroup

Grouped action container for related buttons.

View component →
forms

Calendar

Application-controlled month grid for date selection; month and year navigation are composed by the application.

View component →
layout

Card

Discrete content surface with header, media, content, and actions.

View component →
data

Chart

Token-backed bar chart primitive for compact metrics.

View component →
forms

Checkbox

Token-styled checkbox control with indeterminate support.

View component →
content

Chip

Compact selected, filter, or metadata token.

View component →
content

CodeBlock

Preformatted code surface for docs and examples.

View component →
content

Collapsible

Native details/summary disclosure for progressively revealing secondary content.

View component →
forms

Combobox

Input with datalist-backed option suggestions.

View component →
recipes

CommandMenu

Command palette-style recipe for action discovery.

View component →
feedback

ConfirmDialog

Confirmation dialog composition for important or destructive actions.

View component →
forms

DatePicker

Date input and calendar popover composition.

View component →
feedback

Dialog

Modal dialog with escape handling and focus support.

View component →
layout

Divider

Horizontal or vertical separator using theme border tokens.

View component →
feedback

DropdownMenu

Trigger-driven menu of contextual commands with menu semantics and keyboard item navigation.

View component →
feedback

EmptyState

Empty, error, or onboarding state composition.

View component →
forms

Field

Label, hint, validation message, required state, and ARIA wiring around one form control.

View component →
layout

Flex

Flexbox layout primitive with token-backed gap options.

View component →
feedback

FocusTrap

Keyboard focus containment helper for overlays.

View component →
forms

FormControl

Native form submission boundary with optional full-width layout styling.

View component →
forms

FormControlLabel

Clickable label composition for checkbox, radio, and switch controls.

View component →
forms

FormLabel

Low-level standalone label for manually composed form layouts.

View component →
layout

Grid

Responsive grid primitive with column and item sizing controls.

View component →
layout

GridRuler

Visual grid helper for spacing and layout debugging.

View component →
feedback

HoverCard

Hover and focus card for supplemental contextual content.

View component →
content

Icon

SVG icon wrapper with currentColor styling.

View component →
content

Image

Image primitive with skeleton and fallback support.

View component →
layout

Inline

Inline layout primitive for compact horizontal groups.

View component →
forms

InputGroup

Composed input with addons and inline action controls.

View component →
content

Kbd

Keyboard shortcut and keycap text primitive.

View component →
content

Link

Token-styled link primitive with disabled and underline options.

View component →
content

List

List primitives for structured textual content.

View component →
navigation

Menubar

Horizontal application menu bar with link and button items.

View component →
navigation

NavigationMenu

Horizontal or vertical destination list with current-page semantics.

View component →
feedback

Overlay

Screen overlay and scrim primitive for modal content.

View component →
layout

Page

Responsive page wrapper with token-backed sizing and padding.

View component →
data

Pagination

Pagination navigation for paged data views.

View component →
feedback

Portal

Portal placeholder primitive for future framework-level mounts.

View component →
feedback

Popover

Floating contextual panel that can contain arbitrary interactive or explanatory content.

View component →
data

Progress

Linear progress indicator with semantic tones.

View component →
data

PropertyList

Responsive key-value details for product records.

View component →
forms

Radio

Token-styled radio input primitive.

View component →
forms

RadioGroup

Radio fieldset that propagates names to child radio controls.

View component →
layout

Resizable

Panel and separator layout anatomy for application-supplied resizing behavior.

View component →
forms

SearchInput

Search input primitive with consistent control sizing.

View component →
layout

ScrollArea

Styled scroll container with directional overflow controls.

View component →
layout

Section

Page section wrapper with title, description, and actions.

View component →
forms

Select

Token-styled select primitive.

View component →
feedback

Sheet

Temporary modal panel that slides from a viewport edge with backdrop, focus containment, and dismissal.

View component →
layout

Shell

Application shell with optional header and sidebar regions.

View component →
layout

Sidebar

Persistent navigation region with responsive token-backed padding.

View component →
feedback

Skeleton

Loading placeholder primitive.

View component →
forms

Slider

Range input primitive.

View component →
layout

Spacer

Decorative token-sized empty space along the block or inline axis.

View component →
feedback

Spinner

Loading spinner with status labeling.

View component →
layout

SplitPane

Fixed two-region main/aside layout with responsive ratio, side, and gap.

View component →
layout

Stack

Vertical layout primitive with token-backed gap options.

View component →
data

Stat

Metric card primitive for dashboard values.

View component →
data

StatusDot

Compact semantic status indicator.

View component →
data

Stepper

Horizontal or vertical progress steps for setup and checkout flows.

View component →
forms

Switch

Toggle switch control.

View component →
data

Table

Accessible table primitives with caption, head, rows, and cells.

View component →
content

Tabs

Tabbed interface primitive with keyboard navigation.

View component →
content

Text

Theme-aware typography primitive.

View component →
forms

TextInput

Token-styled native input element for text-like values.

View component →
forms

Textarea

Token-styled multiline text input.

View component →
data

Timeline

Chronological timeline for events and milestones.

View component →
feedback

Toast

Inline notification surface and fixed toast stack.

View component →
forms

Toggle

Button with an application-controlled pressed/unpressed state.

View component →
forms

ToggleGroup

Compact single- or multi-select choice set rendered as connected toggles.

View component →
layout

Toolbar

Flexible toolbar for control groups and page actions.

View component →
feedback

Tooltip

Inline tooltip wrapper for supplemental labels.

View component →
feedback

VisuallyHidden

Accessible visually hidden content helper.

View component →