UI components
Browse, filter, and compare 85 public Tavo.js UI components with examples, accessibility guidance, props, and API details.
See the system working together
Theme-aware, accessible components rendered live—not screenshots. Interact with them, then open a component to see its API and code.
Date selection with keyboard-aware interaction.
Variants, tones, sizes, and states that share one system.
Accessible data visualization with theme-aware tones.
Structured activity that remains easy to scan.
Release activity
- Documentation refreshed
Added live component examples and complete API references.
- Theme generated
Synchronized the website with the current Tavo.js UI tokens.
- Accessibility audit
Verified focus, contrast, and readable content order.
85 components
Alert
Inline status message for success, warning, danger, and info states.
AppBar
Top application bar for navigation and product actions.
AspectRatio
Fixed-ratio media and content frame primitive.
Avatar
User or entity avatar with image, initials, and fallback rendering.
Box
Generic token-backed layout and surface primitive.
Breadcrumbs
Page hierarchy navigation with current-page semantics.
Button
Action control with solid, soft, outline, and ghost variants.
ButtonGroup
Grouped action container for related buttons.
Calendar
Month grid with date selection and optional built-in month and year navigation.
Card
Discrete content surface with header, media, content, and actions.
Chart
Token-backed bar chart primitive for compact metrics.
Checkbox
Token-styled checkbox control with indeterminate support.
Chip
Compact selected, filter, or metadata token.
CodeBlock
Preformatted code surface for docs and examples.
Collapsible
Native details/summary disclosure for progressively revealing secondary content.
ColorPicker
Native color selection control with token-backed styling.
Combobox
Input with datalist-backed option suggestions.
CommandMenu
Command palette-style recipe for action discovery.
ConfirmDialog
Confirmation dialog composition for important or destructive actions.
DatePicker
Date input and calendar popover composition.
Dialog
Modal dialog with escape handling and focus support.
Divider
Horizontal or vertical separator using theme border tokens.
DropdownMenu
Trigger-driven menu of contextual commands with menu semantics and keyboard item navigation.
EmptyState
Empty, error, or onboarding state composition.
Field
Label, hint, validation message, required state, and ARIA wiring around one form control.
FileTrigger
Accessible file-input trigger styled through the button system.
Flex
Flexbox layout primitive with token-backed gap options.
FocusTrap
Keyboard focus containment helper for overlays.
FormControl
Native form submission boundary with optional full-width layout styling.
FormControlLabel
Clickable label composition for checkbox, radio, and switch controls.
FormLabel
Low-level standalone label for manually composed form layouts.
Grid
Responsive grid primitive with column and item sizing controls.
GridRuler
Visual grid helper for spacing and layout debugging.
HoverCard
Hover and focus card for supplemental contextual content.
Icon
SVG icon wrapper with currentColor styling.
Image
Image primitive with skeleton and fallback support.
Inline
Inline layout primitive for compact horizontal groups.
InputGroup
Composed input with addons and inline action controls.
Kbd
Keyboard shortcut and keycap text primitive.
Link
Token-styled link primitive with disabled and underline options.
List
List primitives for structured textual content.
Menubar
Horizontal application menu bar with link and button items.
NavigationMenu
Horizontal or vertical destination list with current-page semantics.
NumberInput
Numeric input with draft-safe typed value callbacks and optional affixes.
ObjectField
Structured JSON-compatible object property editor with validation.
Overlay
Screen overlay and scrim primitive for modal content.
Page
Responsive page wrapper with token-backed sizing and padding.
Pagination
Pagination navigation for paged data views.
Portal
Portal placeholder primitive for future framework-level mounts.
Popover
Floating contextual panel that can contain arbitrary interactive or explanatory content.
Progress
Linear progress indicator with semantic tones.
PropertyList
Responsive key-value details for product records.
Radio
Token-styled radio input primitive.
RadioGroup
Radio fieldset that propagates names to child radio controls.
Resizable
Resizable region with pointer dragging, keyboard adjustment, size limits, and preview and commit callbacks.
SearchInput
Search input primitive with consistent control sizing.
ScrollArea
Styled scroll container with directional overflow controls.
Section
Page section wrapper with title, description, and actions.
Select
Token-styled select primitive.
Sheet
Temporary modal panel that slides from a viewport edge with backdrop, focus containment, and dismissal.
Shell
Application shell with optional header and sidebar regions.
Sidebar
Persistent navigation region with responsive token-backed padding.
Skeleton
Loading placeholder primitive.
Slider
Range input primitive.
Spacer
Decorative token-sized empty space along the block or inline axis.
Spinner
Loading spinner with status labeling.
SplitPane
Fixed two-region main/aside layout with responsive ratio, side, and gap.
Stack
Vertical layout primitive with token-backed gap options.
Stat
Metric card primitive for dashboard values.
StatusDot
Compact semantic status indicator.
Stepper
Horizontal or vertical progress steps for setup and checkout flows.
Switch
Toggle switch control.
Table
Accessible table primitives with caption, head, rows, and cells.
Tabs
Tabbed interface primitive with keyboard navigation.
Text
Theme-aware typography primitive.
TextInput
Token-styled native input element for text-like values.
Textarea
Token-styled multiline text input.
Timeline
Chronological timeline for events and milestones.
TreeView
Keyboard-accessible hierarchical view with multi-selection and drop states.
Toast
Inline notification surface and fixed toast stack.
Toggle
Button with an application-controlled pressed/unpressed state.
ToggleGroup
Compact single- or multi-select choice set rendered as connected toggles.
Toolbar
Flexible toolbar for control groups and page actions.
Tooltip
Inline tooltip wrapper for supplemental labels.
VisuallyHidden
Accessible visually hidden content helper.