Skip to content
6

Data display.

Feeds, timelines, trees, heatmaps and other ways to show structured data.

12 components

Stat Card

Data display

Compact metric card with label, value, and an up/down/flat trend chip. Compound and single-prop APIs.

View

Timeline

Data display

Vertical event timeline with default or icon dots, tone variants and labelled time / title / description parts.

View

Avatar Stack

Data display

Overlapping avatar group with size (sm/md/lg) and spacing (tight/normal/loose) variants, image or fallback support, numeric overflow chip, and asChild on items/overflow so each avatar can render as a link or button.

View

Tree View

Data display

Collapsible nested tree for file explorers and hierarchical data, with auto folder/file icons, depth indentation, selection and keyboard focus.

View

Animated Number

Data display

Count-up number that tweens to its target with easing, Intl formatting (currency, compact, percent), prefix/suffix and reduced-motion support.

View

Sortable

Data display

Drag-to-reorder list with pointer and keyboard sorting, handle or whole-item dragging, and live-region announcements. No dnd-kit.

View

Countdown Timer

Data display

Count-down-to-date timer with boxed / inline / minimal variants, a useCountdown hook, digit animation and completion content.

View

Calendar Heatmap

Data display

GitHub-style contribution heatmap with month and weekday labels, tooltips, configurable intensity scale and a legend.

View

Data Table

Data display

TanStack-powered data table: faceted, text, range and date filters, sortable columns, column visibility, row selection and pagination, with page, sort and filters kept in the URL. One useDataTable hook drives it: pass pageCount to query server-side, or omit it to sort, filter and page a local array in memory. Ships as a folder of composable parts.

View

Metric Card

Data display

Compact metric card with a value and unit, a tone-aware sparkline and an up / down trend line. Compound API.

View

Kanban

Data display

Board of columns and cards with pointer and keyboard drag-and-drop across columns, drop placeholder, empty-column hint and live-region announcements. No dnd-kit.

View

Sparkline

Data display

Tiny inline SVG chart in line, area or bar form with optional curve, last-point dot, reference line and hover tooltip. Tints with currentColor, no chart library.

View