Content & Data
Content and data components present structured information such as lists, tags, avatars, and metadata.
What this category contains
These components prioritize readable hierarchy, consistent spacing tokens, and semantic HTML where possible.
Status
Calendar Day, Calendar Grid, Tag, Avatar, Divider, List Item, and Empty State are implemented in Beta.
Accessibility considerations
Preserve heading order, list semantics, and text alternatives for non-text content.
Implemented components (13)
- Tagbeta
Tag is a compact classification label for categories, filters, or user-applied values — distinct from read-only Badge status metadata.
- Avatarbeta
Avatar is a circular visual identity for a user or entity with image, initials, or icon fallback.
- Dividerbeta
Divider is a thin separator line between content sections — horizontal or vertical, semantic or decorative.
- List Itembeta
List Item is a single row inside a collection — avatar, title, description, metadata, and optional trailing content.
- Tablebeta
Table is a native HTML table foundation with captions, headers, body rows, footers, cell alignment, responsive overflow, RTL support, print-friendly scrolling, and composition patterns for empty/loading/error — not the interactive Data Table pattern (no sorting, selection, or pagination).
- Data Tablebeta
Data Table is an interactive data-table pattern composing Table with header sorting and external Pagination — no columns-config prop; the consumer writes their own Table/TableHead/TableBody markup and drops in DataTableSortHeader for sortable columns.
- Tree Viewbeta
Tree View is a hierarchical, keyboard-navigable tree — file explorers, nested category browsers, org charts. Composes Content/Tree Item rows with roving-tabindex keyboard navigation and depth-based indentation.
- Bar Chartbeta
Bar Chart is a single-series, static bar chart built on recharts — real proportional bar heights, month labels below, no Y-axis/gridlines/legend/tooltip.
- Line Chartbeta
Line Chart is a single-series, static line chart built on recharts — a single stroked path with hollow-ring point markers, no axes/gridlines/legend/tooltip.
- Timelinebeta
Timeline is a vertical, chronological event list built on Content/Timeline Item rows — Default outlined-ring or Highlighted solid-dot markers, connector suppression purely positional.
- Empty Statebeta
Empty State is a zero-content placeholder with title, description, and optional recovery actions for collections, search, or first-use flows.
- Calendar Daybeta
Calendar Day is a single selectable day cell inside a month calendar grid.
- Calendar Gridbeta
Calendar Grid is a composed month-view calendar with single-date or range selection and grid keyboard navigation.