Component Status Matrix
Comprehensive overview of all components in the design system, including their status, documentation, and implementation details.
Showing 94 of 94 components
| Component | Category | Layer | Status | Playground | Last Updated |
|---|---|---|---|---|---|
| Accordion Vertically stacked sections that expand/collapse to reveal content. Supports single or multi-panel open modes. | Containers | composers | Built | ✓ | — |
| Action Bar Groups actions with priority + overflow. | Actions | composers | Planned | — | — |
| Alert Inline notification banner for important messages. Does not require user interaction to dismiss. | Display | compounds | Built | ✓ | — |
| AlertNotice Inline alert message communicating status, errors, warnings, or success. Always visible (not triggered by user interaction). | Display | compounds | Built | — | — |
| AnimatedCard A card component that animates into view when it enters the viewport. | Display | primitives | Built | — | — |
| AnimatedSection A page section that fades and slides into view when it enters the viewport. | Display | primitives | Built | — | — |
| AnimatedText Text that animates character-by-character or line-by-line into view on scroll. | Display | primitives | Built | — | — |
| AspectRatio Constrains its child to a fixed aspect ratio (e.g. 16:9) regardless of container width. | Containers | primitives | Built | — | — |
| Avatar Circular user or entity representation showing an image, initials, or icon fallback. | Display | primitives | Built | — | — |
| Badge Small label conveying status, category, or count. Typically paired with other content. | Feedback | primitives | Built | — | — |
| Blockquote Styled blockquote for displaying cited passages or testimonials. | Textual | primitives | Built | — | — |
| BrandSwitcher Navigation control for switching between Qualtrics brands or product lines. | Navigation | primitives | Built | — | — |
| Breadcrumbs Navigation landmark showing the current page location within a site hierarchy. | Navigation | primitives | Built | — | — |
| Button Clickable element for triggering actions. Supports multiple visual variants and semantic intents. | Actions | primitives | Built | ✓ | |
| Calendar Interactive calendar grid for selecting a single date or a date range. | Inputs | composers | Built | — | — |
| Card Surface container grouping related content with optional header, media, and action areas. | Display | compounds | Built | ✓ | — |
| ChartContainer Frame for charts (not chart itself). | Data Visualization | composers | Planned | — | — |
| Checkbox Binary or tri-state input for boolean selection. Supports indeterminate state for partial group selection. | Inputs | primitives | Built | ✓ | — |
| CheckboxGroup Grouped options with label. | Inputs | compounds | Planned | — | — |
| Chip Compact interactive element for tags, filters, or multi-select choices. | Display | primitives | Built | — | — |
| ColorPicker Input + palette. | Inputs | compounds | Planned | — | — |
| Command Command palette modal for keyboard-driven search and action execution. | Actions | composers | Built | — | — |
| ContextMenu Right-click menu. | Actions | composers | Planned | — | — |
| DatePicker Input + calendar popover. | Inputs | compounds | Planned | — | — |
| Details Disclosure widget revealing additional content on demand. Semantically equivalent to <details>/<summary>. | Textual | composers | Built | — | — |
| Dialog Modal overlay requiring user attention before returning to the page. Traps focus until dismissed. | Containers | composers | Built | ✓ | — |
| Divider Visual separator between content sections. Renders as an hr or div depending on orientation. | Display | primitives | Built | — | — |
| Drawer Sliding overlay. | Containers | composers | Planned | — | — |
| Dropdown Triggered list of actions. | Actions | compounds | Planned | — | — |
| Field Form field layout wrapper that pairs a label, input, and optional hint or error message. | Forms | composers | Built | — | — |
| FileInput File picker + label. | Inputs | compounds | Planned | — | — |
| FilterBar Toolbar specialized for filters. | Actions | composers | Planned | — | — |
| Form Orchestrates validation and submission. | Forms | composers | Planned | — | — |
| Heading Section title. | Textual | primitives | Planned | — | — |
| Icon Renders a named SVG icon from the design system icon set. | Display | primitives | Built | — | — |
| IconButton Button containing only an icon. | Actions | primitives | Planned | — | — |
| Image Responsive image component wrapping Next.js Image with layout and aspect-ratio helpers. | Display | primitives | Built | — | — |
| Input Native text input with portfolio-specific styling. Use inside TextField for label and error support. | Inputs | primitives | Built | ✓ | |
| Label Accessible form label associated with a control via htmlFor. | Inputs | primitives | Built | — | — |
| Links Styled anchor links with design-system typography and color variants. | Navigation | primitives | Built | — | — |
| List Semantic list element (ul, ol, or dl) with consistent spacing and marker styles. | Containers | primitives | Built | — | — |
| ListItem Item with primary/secondary text and optional icon. | Display | compounds | Planned | — | — |
| Loading Overlay Full-screen blocking state. | Feedback | composers | Planned | — | — |
| Mention Picker Autocomplete list for @ mentions. | Editing | composers | Planned | — | — |
| MenuButton Triggered list of actions. | Actions | compounds | Planned | — | — |
| Message Composer Text input + attachments + formatting. | Editing | composers | Planned | — | — |
| Modal Blocking and non-blocking overlay container. | Containers | composers | Planned | — | — |
| Multi-Step Form Multi-step field orchestration. | Forms | composers | Planned | — | — |
| NavigationRail App-wide nav structure. | Navigation | composers | Planned | — | — |
| OTP One-time password input composed of individual single-character digit fields. | Inputs | composers | Built | — | — |
| PageTransition Wraps page content to apply route-change fade/slide animations between Next.js pages. | Display | primitives | Built | — | — |
| Pagination Controls item/page navigation. | Navigation | composers | Planned | — | — |
| Popover Non-modal floating panel anchored to a trigger element. Does not trap focus. | Containers | composers | Built | — | — |
| Postcard Social-media-style post card with author, content, media embed, and engagement stat slots. | Textual | composers | Built | — | — |
| ProfileFlag Avatar-style display of a user or entity identity with name and optional status badge. | Display | primitives | Built | — | — |
| Progress Visual indicator for task completion. Supports linear bar and circular ring variants. | Display | primitives | Built | — | — |
| ProgressBar Linear visual progress. | Feedback | compounds | Planned | — | — |
| Radio Single-choice option. | Inputs | primitives | Planned | — | — |
| RadioGroup Grouped options with label. | Inputs | compounds | Planned | — | — |
| Rich Text Editor Schema + plugins + toolbar orchestration. | Editing | composers | Planned | — | — |
| SearchField Input + search icon + clear button. | Inputs | compounds | Planned | — | — |
| SegmentedControl Group of related toggle buttons. | Actions | compounds | Planned | — | — |
| Select Dropdown selector with optional search, single or multi-select, and keyboard navigation. Renders a floating listbox anchored to the trigger. | Inputs | composers | Built | ✓ | — |
| Sheet Slide-in panel (drawer) that overlays the page from an edge. Traps focus until dismissed. | Feedback | composers | Built | — | — |
| ShowMore Expandable container that truncates long content with a "show more" affordance. | Textual | composers | Built | — | — |
| Shuttle Dual-listbox transfer widget for moving items between two ordered collections. | Actions | compounds | Built | — | — |
| Sidebar A layout component for creating collapsible sidebar navigation with support for different positions and responsive behavior. | Containers | primitives | Built | — | — |
| Sidebar Nav App-wide nav structure. | Navigation | composers | Planned | — | — |
| SideNavigation Headless navigation container that orchestrates expanded/collapsed state and provides context for nested navigation items. | Display | compounds | Built | — | — |
| Skeleton Loading placeholder that mimics the shape of content before data is available. | Display | primitives | Built | — | — |
| Slider Continuous or stepped numeric input. | Inputs | primitives | Planned | — | — |
| SlinkyCursor Animated custom cursor indicator following the pointer with a spring-physics trail. | Display | primitives | Built | — | — |
| Snackbar Temporary notifications. | Feedback | composers | Planned | — | — |
| Spacer Non-semantic layout gap. | Display | primitives | Planned | — | — |
| Spinner Rotating indicator for indeterminate loading states. | Feedback | primitives | Built | — | — |
| Status Compact icon-and-label pair conveying a status condition (online, offline, busy, etc.). | Display | primitives | Built | — | — |
| Stepper Multi-step progress indicator. | Navigation | compounds | Planned | — | — |
| Switch Boolean toggle for enabling or disabling a setting. Semantically equivalent to a checkbox but with a sliding thumb affordance. | Inputs | primitives | Built | ✓ | — |
| Table Data table with sortable columns, row selection, and pagination support. | Display | compounds | Built | — | — |
| TableRow Standardized table row. | Display | compounds | Planned | — | — |
| Tabs Tabbed navigation for switching between related content panels within the same page context. | Navigation | composers | Built | — | — |
| Tag Label + optional dismiss. | Display | compounds | Planned | — | — |
| Text Polymorphic text element with design-system typography variants and semantic element control. | Textual | primitives | Built | — | — |
| TextareaField Multiline entry. | Inputs | compounds | Planned | — | — |
| TextField Full-featured form field composing Label, Input, description, and error message with ARIA wiring. | Inputs | primitives | Built | — | — |
| Toast Transient notification message appearing briefly at the edge of the viewport. | Feedback | composers | Built | — | — |
| ToggleGroup Group of related toggle buttons. | Actions | compounds | Planned | — | — |
| ToggleSwitch Binary switch control rendered as input[role=switch] with an adjacent label. | Inputs | primitives | Built | — | — |
| Toolbar Editor command surface that groups formatting, alignment, color, insertion, and history actions for a TipTap editor instance. | Actions | composers | Built | — | — |
| Tooltip Floating label providing supplemental information about a trigger element on hover or focus. | Feedback | primitives | Built | ✓ | — |
| Truncate Clamps multi-line text to a fixed number of lines with an expand/collapse toggle. | Display | primitives | Built | — | — |
| VisuallyHidden Renders children invisibly for sighted users but accessible to screen readers. Equivalent to .sr-only. | Containers | primitives | Built | — | — |
| Walkthrough Step-by-step guided tour overlay anchored to page elements. Manages step progression and keyboard navigation. | Feedback | composers | Built | — | — |
| Wizard Multi-step field orchestration. | Forms | composers | Planned | — | — |