Display

Components for presenting content — cards, badges, avatars, typography, and structured lists. Modern CSS (@container, :has()) does the layout work, not JavaScript.

58 display components

• Alert — Highlights a short, important message inline
• Avatar — Displays a user image with initials fallback
• AvatarGroup — Overlapping stack of avatars with a max cap and an i18n-labelled +N overflow chip
• Badge — Small status label or category indicator
• Blockquote — Quoted passage with optional attribution footer
• Card — Container for grouping related content
• Carousel — Scroll-snap slide deck with previous/next controls and dot indicators
• ChatBubble — Message bubble for chat and messaging UIs with avatar, name, and timestamp support
• Code — Inline code span for identifiers, commands, and short snippets
• CodeSnippet — Displays code (inline, single-line, or multi-line) with an optional copy button, lightweight built-in syntax highlighting for bash/css/js/ts, and an optional terminal-window look
• Collapsible — A single disclosure region toggled open and closed by its trigger
• Comparison — Reveals the difference between two layers with a draggable divider
• ConsoleApp — Carbon-parity console shell: ShellHeader + icon-rail SideNav + HeaderPanel notifications/switcher + collapsible aside + main content.
• ContainedList — Labelled list of rows inside a bordered container
• DashboardCharts — Dashboard layout with KPI tiles, line chart, bar chart, and pie chart.
• DataList — Key-value pairs rendered as a description list
• DataTable — Signal-driven data table with client/server sort, filter, pagination, multi-selection, expandable rows, and CSS content-visibility row containment for large datasets
• EmptyDashboard — Dashboard page showing an empty state with a call-to-action button.
• EmptyState — Placeholder for views that have no data to display
• Flow — The declarative, AI-first flow surface — render a node/edge graph from plain serializable data.
• FlowBackground — Decorative dots / grid / cross canvas background, drawn purely in CSS gradients.
• FlowCanvas — The pan/zoom canvas pane — a single CSS-transformed layer driven by the viewport signal.
• FlowControls — Zoom in / out / fit-view controls for a flow canvas — real, i18n-labeled buttons.
• FlowEdge — An SVG edge with bezier/straight/smoothstep paths, an arrowhead, an optional label, and animation.
• FlowHandle — A connection port on a node edge — where edges attach and interactive connect starts.
• FlowMiniMap — A scaled SVG overview of the graph with a draggable viewport rectangle.
• FlowNode — An HTML node box positioned in the viewport pane — draggable, selectable, with arbitrary children.
• FlowPanel — An absolutely-positioned slot for custom flow-canvas UI (legend, toolbar).
• FlowStory — A scripted, sequenced, looping flow animation — walks a graph step by step with fade-in captions.
• Heading — Section heading with semantic level decoupled from visual size
• Highlight — Read-only syntax-highlighted code block — the same owned tokenizer as CodeEditor, without the textarea.
• Image — Image with load state, blur-up placeholder, graceful fallback, and optional zoom
• Item — Generic content row primitive with media, content, and action regions
• Kbd — Displays a keyboard key or shortcut
• List — Styled unordered or ordered list with ListItem
• LoginPage — Authentication login page with email and password form.
• LogViewer — Virtualized monospace console for high-frequency log and stream output
• NotificationCenter — A list of notification alerts with a mark-all-read action.
• PageWithBreadcrumb — A centered content page with a breadcrumb navigation and page header.
• Prose — Wrapper that styles raw descendant HTML — headings, lists, code, quotes, tables
• QrCode — Encodes a URL or short text into a scannable SVG QR code
• RelativeTime — Displays a date as a localized phrase relative to now, auto-updating
• Separator — Visual or semantic divider between content
• SettingsFormPage — Settings page with profile form inside a two-column settings layout.
• SidebarApp — Full app shell with collapsible side navigation and top header.
• Skeleton — Animated loading placeholder that mirrors the shape of pending content
• Stat — Displays a key metric with optional delta, trend direction and help text
• StatsCards — Grid of KPI stat cards with trend badges.
• Status — Colored dot with a label communicating the state of a system or entity
• StructuredList — Tabular row list for scannable data, optionally single-selectable
• SwipeItem — List row whose leading/trailing actions are revealed by a horizontal swipe, with keyboard parity
• Tag — Compact chip for labeling, categorizing, or filtering content
• Text — Body text with size, weight, and muted variants
• Timeline — Ordered sequence of events with status markers and a connector line
• TreeView — Hierarchical, expandable tree of nodes with keyboard navigation and selection
• User — Identity composite: an avatar with a name, description, and optional action slot
• UsersTablePage — Full users management page with table, search, and invite action.
• VisuallyHidden — Hides content visually while keeping it available to screen readers

← Back to docs