Data display.
Feeds, timelines, trees, heatmaps and other ways to show structured data.
11 components
Components
11 totalStat Card
Compact metric card with label, value, and an up/down/flat trend chip. Compound and single-prop APIs.
/components/data/stat-card →Timeline
Vertical event timeline with default or icon dots, tone variants and labelled time / title / description parts.
/components/data/timeline →Avatar Stack
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.
/components/data/avatar-stack →Tree View
Collapsible nested tree for file explorers and hierarchical data, with auto folder/file icons, depth indentation, selection and keyboard focus.
/components/data/tree-view →Animated Number
Count-up number that tweens to its target with easing, Intl formatting (currency, compact, percent), prefix/suffix and reduced-motion support.
/components/data/animated-number →Sortable
Drag-to-reorder list with pointer and keyboard sorting, handle or whole-item dragging, and live-region announcements. No dnd-kit.
/components/data/sortable →Countdown Timer
Count-down-to-date timer with boxed / inline / minimal variants, a useCountdown hook, digit animation and completion content.
/components/data/countdown-timer →Calendar Heatmap
GitHub-style contribution heatmap with month and weekday labels, tooltips, configurable intensity scale and a legend.
/components/data/calendar-heatmap →Activity Feed
Avatar-led event feed with a connecting rail, actor and action lines, timestamps, quoted bodies and date dividers. Compound API.
/components/data/activity-feed →Audit Log
Compliance-style event log with expandable rows that reveal actor, action, status and request metadata. Compound disclosure API.
/components/data/audit-log →Data Table
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.
/components/data/data-table →