Components

Buttons, icon buttons, split buttons, copy and theme toggles.

Primary, outline, ghost and danger variants with full keyboard support.

Square icon-only button, same variants as Button.

A button with a dropdown menu on the right edge.

Copies text to the clipboard with visual feedback.

Toggles between light and dark mode.

Text inputs, selects, checkboxes, radios, switches and more.

Single-line text input with affix slots and validation state.

Text input with search icon and clear button.

Masked field with a reveal toggle.

Displays a password strength estimate.

Multi-line text input with auto-resize.

Numeric input with step controls.

Dropdown selector with search and multi-select support.

The trigger button for a Select, used in custom menus.

Environment selector (dev / staging / production) with color coding.

Text input with dropdown suggestions.

Boolean checkbox with indeterminate state.

Checkbox with a label, description and validation.

Group of checkboxes with select-all support.

Radio button, always used inside a RadioGroup.

Mutually-exclusive radio button group.

Toggle switch for boolean settings.

Range slider with single or double thumbs.

Horizontal button group for mutually-exclusive options.

Read-only star (or custom icon) rating display.

Interactive star rating for user input.

Color picker with swatch grid and custom hex input.

Icon picker with a searchable grid, Tabler defaults and injectable custom icons.

Multiple-value input rendered as removable tokens.

File upload with drag-and-drop, progress and validation.

Drag-and-drop target area.

List of uploaded files with status and actions.

Two-panel list for moving items between source and target.

Single-date calendar picker with presets.

Date range calendar picker with presets.

Text field for typing a date range directly.

Compact calendar month view for date selection.

Field wrappers, form groups, validation messages.

Wraps an input with a label, description and validation message.

Side-by-side field layout.

Groups fields and manages collective validation state.

Semantic field set with legend.

Wraps a control inside a field with consistent spacing.

Validates an error or hint message for a field.

Tables, grids, lists, trees, JSON, code and logs.

Standard data table with sortable headers and footers.

Scrollable container for wide tables.

Data grid with sorting, filtering and cell editing.

Virtualised scrolling list for large datasets.

Standard list with selectable, clickable items.

Single row in a List, ListSection or standalone.

Categorized section within a List.

Horizontal divider between list items.

Label–value pair list, like a spec sheet.

Compact row for a cloud/IT resource with icon and meta.

Horizontal list of tags or keywords.

Clipped text with line clamp, middle ellipsis and an overflow tooltip.

Lazy image with a reserved box, a placeholder and a failure fallback.

Hierarchical tree with expand/collapse.

TreeView rendered as a table with columns.

Interactive JSON tree with syntax highlighting.

Syntax-highlighted code block with copy.

Inline code snippet within running text.

Unified or split diff viewer.

Scrollable log viewer with severity badges and search.

Drag-and-drop kanban board.

Single column in a KanbanBoard.

Card inside a KanbanColumn.

Page-number pagination with first/last shortcuts.

Individual page button used inside Pagination.

Ordered event display with three variants and slots per row.

One event, composed by hand.

Feed of activity entries rendered as sentences.

Threaded comment system with reactions.

Single comment display.

Rich text comment input.

KPIs, meters, progress, trends, badges and avatars.

Key performance indicator card with trend sparkline.

Single metric with label, value and trend indicator.

Grid layout for MetricCards.

Gauge-like meter with thresholds.

Horizontal usage bar with percentage and threshold.

Semi-circular gauge with value and range.

Horizontal progress bar with tone and label.

Circular progress indicator.

Up/down/flat trend indicator with color.

Horizontal strip of uptime status segments.

Small colored dot for status indication.

Text with status dot prefix.

A state in a container, for headers and toolbars.

Small label for categorization.

Compact chip for a single input value.

Toggleable chip for filter UI.

Numeric badge for counts and notifications.

User avatar with fallback to initials.

Overlapping avatar stack with overflow count.

Line, bar, donut, sparklines, scatter, histogram, heatmap and more.

Multi-series line chart with tooltips.

Stacked or single area chart.

Bar chart with stacked and grouped variants.

Donut or pie chart with center value.

Full pie (or donut) with hoverable legend.

Inline chart for trends.

Scatter plot with tooltips.

Binned distribution histogram.

Statistical distribution with quartiles and outliers.

Heatmap with color-coded cells.

GitHub-style activity grid for time-series density.

Multi-variable comparison on radial axes.

Hierarchical proportional data as nested tiles.

Multi-level hierarchy as concentric rings.

Flow and funnel visualization between nodes.

Multi-dimensional data exploration across axes.

Before/after comparison between two time points.

Gauge with value, target, and qualitative ranges.

Conversion funnel visualization.

Running total waterfall chart.

OHLC candlestick chart.

US state choropleth map.

Header row for custom chart tooltips.

Data row for custom chart tooltips.

Tabs, breadcrumbs, sidebar, topbar, toolbar and more.

Page title, stat rail, status and actions.

Horizontal or vertical tab navigation.

Breadcrumb trail navigation.

Text link with tone colors and external-link attributes.

Step indicator for a flow; four variants, five states.

Multi-step flow management: steps, values, validation, branches and completion.

Greeting screen shown before a wizard's first question; cycles through its own translations.

Displays wizard steps in a vertical or horizontal list.

A wizard's action row with Cancel, Back, Skip and the advance button.

Wizard answers with links to edit the corresponding steps.

Application sidebar navigation container.

Brand/logo area at the top of a Sidebar.

Organization/workspace switcher in a Sidebar.

Navigation list inside a Sidebar.

Container grouping SidebarNavItem entries.

Single navigation item with icon and badge.

Footer area pinned to the bottom of a Sidebar.

Browser-style tab strip.

Single tab inside a TabStrip.

Horizontal action toolbar.

Top application bar with search and actions.

Icon button styled for the TopBar.

Live clock display in the TopBar.

Modals, drawers, popovers, hover cards, tooltips, menus and command palette.

Centered dialog overlay with backdrop.

Header area of a Modal.

Scrollable body area of a Modal.

Footer area of a Modal, typically for actions.

Slide-in panel from any edge.

Header area of a Drawer.

Scrollable body of a Drawer.

Footer area of a Drawer.

Modal confirmation dialog with tone and actions.

Viewport-aware positioned popover content.

Header of a PopoverPanel.

Body of a PopoverPanel.

Footer of a PopoverPanel.

Contextual card shown on hover.

Header of a HoverCard.

Body content of a HoverCard.

Stat row inside a HoverCard.

Short label shown on hover or focus.

Dropdown menu triggered by a button.

Right-click context menu.

Wrapper that enables right-click on its children.

Single item in a menu with icon, shortcut, submenu.

Horizontal divider between menu items.

Keyboard-driven command palette (⌘K).

Product walkthrough with a spotlit element and a step card.

Nav-rail settings dialog with a titled, scrolling pane.

Titled, framed block of settings rows inside a pane.

One setting: label + description on the left, control on the right.

The shared sign-in, sign-out and step-up surface.

Auth card with brand area, title, error strip and sign-in methods.

Full-width SSO / OAuth / custom provider button with loading state.

Full-page background hosting a LoginPanel, built on Stage.

Labeled divider between SSO buttons and a credentials form.

The framed tile a product mark sits in above an auth heading.

Banners, toasts, notifications, empty states, spinners and skeletons.

Full-width status banner with tone and actions.

App-shell footer strip for connection and process state.

Highlighted inline message box.

Auto-dismissing notification card.

Manages toast stack, timers and placement.

Persistent notification item.

Notification inbox dropdown panel.

Bell icon with unread count badge.

Placeholder for empty content areas.

Spinning loading indicator, available in the tone colors.

Covers a region while it refreshes, without collapsing the layout.

Placeholder loading animation.

Displays placeholder lines while text loads.

Row-shaped placeholder for a list or a feed.

Placeholder rows at Table's density.

Card-shaped placeholder with media, header, body and actions areas.

Rearrangeable grids: drag, resize, pin, persist.

Cell grid whose tiles the reader can drag, resize and rearrange.

One tile of a MosaicGrid, with its drag and resize grips.

Standalone grab handle for a bare tile or a custom header.

Renders its children only while the enclosing tile is big enough.

Cards, accordions, scroll regions, resizable panes and carousels.

Full-bleed page background that a single card sits on, e.g. sign-in, setup, welcome.

Content card with optional header and body.

Header area of a Card.

Body area of a Card.

Expandable accordion container.

Single expandable item in an Accordion.

Scrolling region with edge fades, styled scrollbars and keyboard access.

Resizable panes, by pointer or keyboard.

Pane with size limits and optional collapse behavior inside SplitPane.

Scroll-snap track with arrows, dots and optional autoplay.

One slide of a Carousel.

Relative time, timestamps, and keyboard shortcut displays.

Displays a time relative to now ('5 minutes ago').

Formatted absolute timestamp.

Displays a keyboard shortcut as styled Kbd keycaps.

Visual predicate editor for building conditional rules.

Visual rule builder for constructing conditional logic.

Group of conditions with AND/OR combinator.