Data display components
Components for showing information: a data table with sorting, selection and pinned columns, Recharts charts that follow the theme, a tree view, cards, list items, badges, avatars, keyboard keys and numbers that roll to their new value.
They handle the dense cases too, with sticky table headers, pinned columns and keyboard navigation through chart points.
- AvatarUser photos with an initials fallback, status badges and stacked groups that collapse into a count.
- BadgeStatus labels with colored dots, removable tags that slide closed and counts that roll to their new value.
- CardA surface for grouping content, with three variants, edge-to-edge media, concentric radii and whole-card links.
- ChartRecharts charts with themed colors, a tooltip and legend that read labels from one config, and keyboard navigation with a visible focus ring.
- Data tableA table for real data, with sorting, search, row selection, pinned columns, a sticky header and pagination.
- ItemA row of media, text and actions for lists, settings and pickers, with a grouped surface and a hover highlight that glides between rows.
- KbdKey caps for shortcuts that show the right symbols on every platform, read them out properly and press down with the real keys.
- Number flowAnimated numbers where only the changed digits spin, with any Intl format and locale.
- TableA responsive table with a surface style, wrapping or compact cells, sticky headers, pinned columns and scroll hints.
- TreeNested, expandable rows for files and hierarchies, with indent guides, connector lines, cascading checkboxes, typeahead and full keyboard support.
Built into Pro blocks
Blocks for AI products that are built from these components.
- Chat SidebarThe sidebar of a chat app, with pinned chats, projects and recents. Handles rename in place, delete with undo and chats still replying.
- Diff ReviewA review of an agent’s file edits before they land. Handles accept or reject per change, comments back to the agent and edits still streaming.
- ThinkingThe thinking view of an AI chat. A live label follows each step, searches and sources fold into a trail, and citations sit beside the answer.
- ProfileThe Profile section of an AI product’s settings. Handles photo cropping, a username checked as you type and email changes confirmed by code.
- SettingsThe settings page of an AI product. Handles a save bar that appears only when something changed, field errors and loading states.
- TeamThe team page of an AI product’s workspace settings. Handles seats running out, pending invites and ownership transfer with a typed confirmation.