Component Standards
Component standards ensure every UI element in your system is robust, accessible, and consistent. Explore anatomy, props, accessibility, states, and usage guidelines to create components that scale and serve diverse user needs.
Standards Categories
Accessibility
Ensure every component meets accessibility requirements and best practices.
Explore Accessibility →States & Variants
Define and show all interactive states and visual variants.
Explore States & Variants →Usage Guidelines
Provide dos and don'ts, usage examples, and contextual recommendations.
Explore Usage Guidelines →Component Library
| Component | Description | Category | Documentation Status |
|---|---|---|---|
Alert Alert Banner, Alert Dialog, Alert Notice... | displays important messages, warnings, or errors to users, typically with different visual styles to indicate severity levels. | Feedback | Planned |
Anchor Link Block Link, External Linking, Inline Link... | A clickable text element that navigates users to another location, either within the same page or to an external resource. | Navigation | Planned |
Anchor Target Scroll Area, Scroller, Signpost... | A target location for navigation within a page. | Navigation | Planned |
Anchored Overlay Contextual Overlay, Anchor Popup | A floating panel anchored to a specific element, typically used for contextual menus, tooltips, or popovers. | Layout | Planned |
Aspect Ratio Ratio Box, Proportional Container | A container maintaining a consistent width-to-height ratio for content. | Layout | Planned |
Avatar Profile image, User Icon, User Image... | A circular or rounded component that displays a user's profile picture, initials, or a placeholder icon to represent a person or entity. | Display | Planned |
Avatar Group Avatar Collection, User Stack | A group of avatars displayed together to represent multiple users or entities. | Display | Planned |
Badge Pill, Badge count, Bullet Badge... | A small visual indicator that displays a number, status, or label, often used to show counts, states, or highlight important information. | Display | Planned |
Banner Project Banner, Brand Moment, Promo Bar | A prominent visual component for announcements or brand-related content. | Display | Planned |
Blockquote Quote, Testimonial | A visually distinct component for highlighting quoted text. | Display | Planned |
Book Flipbook, Page Viewer | Simulates a book interface for page navigation with realistic animations. | Display | Planned |
Breadcrumb Back Link, Branch Name, Inpage Nav... | A navigation component that shows the current page's location within a website's hierarchy, allowing users to understand their position and navigate back to previous levels. | Navigation | Planned |
Button Action Button, Action Link, Chunky Buttons... | An interactive element that triggers an action when clicked, available in various styles and sizes to indicate different levels of importance and functionality. | Action | Planned |
Button Group Action Group, Button Set, Button Cluster | Groups related buttons together for organized interactions. | Action | Planned |
Calendar Scrollable Calendar, Date Picker, Date Selector... | displays dates in a grid format, allowing users to view, select, and interact with dates, often including features for event display and date range selection. | Data | Planned |
Captcha Human Verification | Verifies users through interactive challenges to prevent bots. | Form | Planned |
Card Asset card, Card Composable, Activation Card... | A container component that groups related content and actions together, often with a visual boundary and optional header, footer, or interactive elements. | Layout | Planned |
Carousel Image Slider, Slide Show, Gallery... | displays a series of content items (images, cards, or other elements) in a rotating sequence, with navigation controls to move between items. | Display | Planned |
Checkbox Checkbox Group, Checkbox Card, Checkbox Button... | A form control that allows users to select one or multiple options from a set of choices, typically displayed as a square box that can be checked or unchecked. | Form | Planned |
Coachmark Tooltip Tour, Guided Help | Highlights and explains interface elements with guided overlays. | Feedback | Planned |
Code Block Snippet, Code Snippet, Syntax Highlighter... | displays formatted code with syntax highlighting, line numbers, and optional copy functionality, typically used for documentation or code examples. | Display | Planned |
Color input Swatch Color Picker, Color, Color area... | A specialized input component that allows users to select colors through various interfaces like color wheels, sliders, or swatches, with support for different color formats. | Form | Planned |
Combo Box Auto complete, Autocomplete, Typeahead... | A combination of a text input and dropdown menu that allows users to either select from predefined options or enter custom values, with filtering and search capabilities. | Form | Planned |
Context Menu Action menu, Command Menu, Content Menu... | A menu that appears in response to user interaction (like right-click or long-press), displaying contextually relevant actions and options for the selected element. | Navigation | Planned |
Counter Stepper, Incrementer | Displays and manages numerical values through increment/decrement interactions. | Form | Planned |
Currency converter | A specialized input component that handles currency conversion, allowing users to input amounts in one currency and view equivalent values in other currencies with real-time updates. | Form | Planned |
Data Visualization Chart | presents data in visual formats like charts, graphs, or diagrams, making complex information more accessible and understandable through visual representation. | Display | Planned |
Date Picker Appointment Picker, Date, Date Input... | A specialized input component that allows users to select dates through a calendar interface, with support for date ranges, time selection, and various date formats. | Form | Planned |
Details Description List, Accordion, Accordion Item... | allows users to expand and collapse content sections, typically with a visible summary and hidden details that can be toggled on demand. | Layout | Planned |
Dialog Confirm Dialog, Feedback, Inline Dialog... | A floating window that appears over the main content to present information, gather user input, or confirm actions, often with a semi-transparent backdrop. | Feedback | Planned |
Dictionary Definition List, Definition, Definition Card... | provides definitions, translations, or explanations for terms, often with search functionality and categorization to help users understand specialized vocabulary. | Display | Planned |
Disclosure Description, Caption | reveals additional information or content when activated, typically through a button or trigger, helping to manage information density and focus user attention. | Display | Planned |
Divider Separator | A visual element that creates separation between content sections, available in various styles like lines, spaces, or decorative elements to improve content organization and readability. | Display | Planned |
Do and Don't List | presents best practices and common mistakes in a structured format, using visual indicators to clearly distinguish between recommended and discouraged actions. | Display | Planned |
Download Download button, File download | initiates file downloads, providing information about file size, type, and download progress, with options for different file formats and download methods. | Form | Planned |
Drawer Bottom Sheet, Tray, Side Drawer... | A panel that slides in from the edge of the screen, typically used for navigation, settings, or additional content, with options for different positions and interaction patterns. | Navigation | Planned |
Editor | provides a rich text editing interface, allowing users to create and modify content with formatting options, media embedding, and real-time collaboration features. | Form | Planned |
Empty State Blank slate, Non-ideal State, Empty... | displays when there is no data or content to show, providing guidance, illustrations, or actions to help users understand and resolve the empty state. | Feedback | Planned |
Fieldset Form, Field set, Fieldgroup... | A container component that groups related form controls together, providing visual organization and semantic structure for complex forms with multiple input fields. | Form | Planned |
File details Document card, File | displays metadata and information about a file, including name, size, type, last modified date, and preview options, with actions for file management. | Display | Planned |
File Upload Drop Zone, Multiple File Upload, Upload... | allows users to select and upload files, supporting drag-and-drop interactions, file type validation, and progress indicators for the upload process. | Form | Planned |
Filter Filter Input, Filter Panel, Quick filter... | allows users to refine and narrow down content or data based on specific criteria, often with multiple filter options and real-time filtering capabilities. | Form | Planned |
Flag | A small visual indicator that draws attention to specific content or states, often using color, icons, or text to highlight important information or status changes. | Display | Planned |
Flightline | visualizes a sequence of events or steps in a process, typically using a horizontal or vertical line with connected nodes to show progression and relationships. | Display | Planned |
Focus Ring | A visual indicator that shows which element currently has keyboard focus, helping users navigate the interface and maintain accessibility standards for keyboard-only users. | Display | Planned |
Footer Page footer | appears at the bottom of a page or section, typically containing navigation links, copyright information, and supplementary content organized in a structured layout. | Layout | Planned |
Gauge | displays a measurement or progress using a circular or semi-circular indicator, often with color coding and numerical values to show current status or performance. | Progress | Planned |
Globe Rating | A rating component that uses a globe or circular visualization to represent scores or ratings, with options for different rating scales and visual styles to indicate quality or performance. | Progress | Planned |
Grid Layout Grid, Page Layout, Flex | A layout component that organizes content into rows and columns, providing a flexible and responsive structure for arranging interface elements in a consistent and visually balanced way. | Layout | Planned |
Header Masthead, Mobile Header, Global header... | appears at the top of a page or section, typically containing navigation, branding, and key actions, with options for different styles and responsive behaviors. | Layout | Planned |
Hero Jumbotron, Hero area, Highlight board | A prominent display component that spans the full width of the viewport, typically used for key marketing messages, featured content, or important announcements with high visual impact. | Display | Planned |
Hotspot Lens Dialog, Zoom, Focus Highlight... | highlights and magnifies specific areas of an image or interface, allowing users to focus on details or access additional information about particular elements. | Display | Planned |
Icon Symbol, Identicons, Icon tile... | A visual symbol or graphic that represents an action, object, or concept, available in various sizes and styles to enhance visual communication and user interface clarity. | Display | Planned |
Icon Button Button Icon, Icon button link | A button component that uses an icon as its primary visual element, providing a compact and intuitive way to represent actions or navigation options with visual clarity. | Form | Planned |
Illustration | displays custom artwork or graphics, often used to enhance visual appeal, explain concepts, or provide visual context for content and features. | Display | Planned |
Image Image card, Picture card | displays and manages images, with options for different aspect ratios, loading states, captions, and interactive features like zoom or gallery views. | Display | Planned |
Info Icon Help Button, Service icons | A small icon component that provides access to additional information or help content, typically appearing as a question mark or information symbol that reveals details on interaction. | Display | Planned |
Infotip | A small popup component that provides contextual information or guidance, appearing when users hover over or focus on an element to explain its purpose or usage. | Display | Planned |
Inline Edit | allows users to edit content directly in its display context, transforming static text into editable fields when activated, with options for different input types and validation. | Form | Planned |
Input Text Input, Input field, Input field with button... | A form control that allows users to enter and edit text or data, with various types and validation options to ensure proper input format. | Form | Planned |
Item Tile | displays a list of items in a tile format, typically used for navigation or content organization, with options for different styles and responsive behaviors. | Display | Planned |
Keyboard Input | displays a list of items in a keyboard input format, typically used for navigation or content organization, with options for different styles and responsive behaviors. | Form | Planned |
Label Field label, Field message, Label Group | displays a label for a form field, with options for different styles and responsive behaviors. | Form | Planned |
List Block List, Bullet List, Flat List... | displays a collection of items in a structured format, with options for different list styles, item selection, and interactive features for data manipulation. | Data | Planned |
Loader Inline Loading, Spinner, Splash Animation... | indicates an ongoing process or loading state, available in various styles like spinners, progress bars, or skeleton screens to provide visual feedback. | Feedback | Planned |
Lockup | displays a list of items in a lockup format, typically used for navigation or content organization, with options for different styles and responsive behaviors. | Display | Planned |
Lookup | displays a list of items in a lookup format, typically used for navigation or content organization, with options for different styles and responsive behaviors. | Display | Planned |
Marquee Marquee, Marquee Text, Marquee Content... | displays a continuous scrolling text or content, often used for announcements, promotions, or important messages, with options for different styles and responsive behaviors. | Display | Planned |
Media Container | provides a container for media content, with options for different aspect ratios, loading states, captions, and interactive features like zoom or gallery views. | Media | Planned |
Message Message card, Message inline, Message bar | displays a message or notification, often used to inform users about system status, updates, or important information, with options for different styles and auto-dismissal. | Display | Planned |
Metadata | displays metadata or information about an item, often used to provide additional details or context about the content or object. | Display | Planned |
Modal Timeout Modal, Modal dialog, Modal alert... | A focused dialog that requires user interaction before returning to the main interface, typically used for important messages, forms, or content that needs immediate attention. | Feedback | Planned |
Navigation Application Navigation Bar, Appnav, Subnav... | provides access to different sections or pages of an application, available in various layouts and styles to accommodate different navigation patterns and hierarchies. | Navigation | Planned |
Notification Nudger, Scoped Notifications, Message toast... | displays temporary messages to inform users about system status, updates, or important information, with options for different styles and auto-dismissal. | Feedback | Planned |
Number Input Numberfield, Numeric input | allows users to enter and edit numeric values, with options for different input types and validation options to ensure proper input format. | Form | Planned |
Offscreen | displays content off-screen, typically used for temporary or hidden content that needs to be accessible for screen readers or other assistive technologies. | Display | Planned |
One-time Password Input | allows users to enter and edit numeric values, with options for different input types and validation options to ensure proper input format. | Form | Planned |
Overlay | A non-opaque overlay that appears on top of the main content, typically used to provide additional information or context about the content or object. | Display | Planned |
Pagination Content Pagination, Numbered pagination, Pagination nav... | allows users to navigate through multiple pages of content, typically showing page numbers, previous/next controls, and options for page size selection. | Navigation | Planned |
Pane Panel, Sheet, Flyout... | displays content in a split-screen format, typically used for sidebars or supplementary information that can be toggled on and off of the main content. | Display | Planned |
Payment Form | allows users to enter and edit payment information, with options for different input types and validation options to ensure proper input format. | Form | Planned |
Phone Number Input | allows users to enter and edit phone number information, with options for different input types and validation options to ensure proper input format. | Form | Planned |
Picklist Skeleton body text | allows users to select one or more options from a list, with options for different styles, step values, and visual feedback. | Form | Planned |
Pivot | displays a list of items in a pivot format, typically used for navigation or content organization, with options for different styles and responsive behaviors. | Display | Planned |
Placeholder Empty prompt | displays a placeholder for content that is still loading or has not been loaded yet, with options for different styles and responsive behaviors. | Display | Planned |
Popover Anchor Popup, PointerBox | displays a small popup or tooltip that appears when users hover over or focus on an element to provide additional information or context about the content or object. | Display | Planned |
Progress Circular Progress, Linear Progress, Meter... | A visual indicator that shows the completion status of a process, available in linear or circular formats, with optional animations and percentage displays. | Feedback | Planned |
Prompt | allows users to enter and edit text information, with options for different input types and validation options to ensure proper input format. | Form | Planned |
Radio Radio Button, Radio button group, Radio button wrapper... | A form control that allows users to select a single option from a set of mutually exclusive choices, typically displayed as circular buttons that can be selected. | Form | Planned |
Range Slider Slider, Range, Range input... | allows users to select a value or range of values by moving a slider along a track, with options for different styles, step values, and visual feedback. | Form | Planned |
Rating Medalist Rating, Star Rating, Rate... | allows users to provide or view ratings, typically using stars or other visual indicators, with options for different rating scales and display styles. | Form | Planned |
Rich Text Editor Wysiwyg, Messagebox, Text Editor... | provides a text editing interface with formatting options, allowing users to create and edit rich text content with various styling and formatting capabilities. | Form | Planned |
Screen Reader Only Visually Hidden, Screenreadercontent | displays content that is only visible to screen readers, typically used to provide additional information or context about the content or object. | Display | Planned |
Search Global Search, Local Search, Input: search... | allows users to search for content, with features like autocomplete, search suggestions, and filters to help users find relevant information quickly. | Form | Planned |
Section | displays a list of items in a section format, typically used for navigation or content organization, with options for different styles and responsive behaviors. | Display | Planned |
Select Dropdown, Dropdown select, Dropdown menu nav... | A form control that allows users to select one or multiple options from a dropdown list, with support for search, filtering, and custom option rendering. | Form | Planned |
Show More | displays a list of items in a show more format, typically used for navigation or content organization, with options for different styles and responsive behaviors. | Display | Planned |
Shuttle Transfer List, Comparison list, Listbox... | allows users to transfer items between two lists, with options for different styles, step values, and visual feedback. | Form | Planned |
Side Navigation | displays a list of items in a side navigation format, typically used for navigation or content organization, with options for different styles and responsive behaviors. | Navigation | Planned |
Signal | displays a list of items in a signal format, typically used for navigation or content organization, with options for different styles and responsive behaviors. | Display | Planned |
Skeleton Shimmer, Loader overlay, Skeleton display text... | displays a placeholder preview of content while it's loading, using subtle animations to indicate that content is being fetched and will appear soon. | Feedback | Planned |
Snackbar | displays a temporary message to inform users about system status, updates, or important information, with options for different styles and auto-dismissal. | Feedback | Planned |
Splash page Entry card, Splash animation | displays a splash page with a logo, title, and description, typically used to welcome users to a new product or service. | Display | Planned |
Stack Stack view, Sonner, Toaster | displays a list of items in a stack format, typically used for navigation or content organization, with options for different styles and responsive behaviors. | Display | Planned |
Stamp | displays a list of items in a stamp format, typically used for navigation or content organization, with options for different styles and responsive behaviors. | Display | Planned |
Status State Label, Entity status badge, Impact badge... | displays a status indicator or label for an entity or object, with options for different styles and responsive behaviors. | Feedback | Planned |
Stepper Input stepper, Progress stepper, Steps... | displays a list of steps in a stepper format, typically used for navigation or content organization, with options for different styles and responsive behaviors. | Form | Planned |
Sticker | displays a list of items in a sticker format, typically used for navigation or content organization, with options for different styles and responsive behaviors. | Display | Planned |
Switch Slide toggle, Toggle switch, ToggleSwitch... | A form control that allows users to toggle between two states (on/off), typically displayed as a sliding switch with visual feedback for the current state. | Form | Planned |
Tab Content Switcher, Underline Navigation, Fake tabs... | organizes content into multiple panels, with tabs for switching between them, supporting different styles and layouts for content organization. | Navigation | Planned |
Table Comparison Table, Data Table, Dynamic Table... | A structured component that displays data in rows and columns, with support for sorting, filtering, pagination, and various interactive features for data manipulation. | Data | Planned |
Table of Contents Contents List, Index Table | displays a list of items in a table of contents format, typically used for navigation or content organization, with options for different styles and responsive behaviors. | Navigation | Planned |
Tag Token, Tagbutton, Tag dismissible | displays a list of items in a tag format, typically used for navigation or content organization, with options for different styles and responsive behaviors. | Display | Planned |
Text Specialized text | displays text in various sizes and styles to create visual hierarchy and structure in content, with options for different heading levels and styles. | Display | Planned |
Text area Textarea wrapper, Text box, Textbox... | A multi-line text input component that allows users to enter and edit longer text content, with options for resizing, character limits, and formatting. | Form | Planned |
Theme Switcher | allows users to switch between different themes or color schemes, typically displayed as a dropdown menu with options for different themes or color schemes. | Form | Planned |
Tile | displays a list of items in a tile format, typically used for navigation or content organization, with options for different styles and responsive behaviors. | Display | Planned |
Timeline Event Timeline, Activity Timeline, History Timeline... | displays events or activities in chronological order, with options for different layouts, event types, and interactive features for exploring the timeline. | Data | Planned |
Title Heading, Subheading, Headings... | displays text in various sizes and styles to create visual hierarchy and structure in content, with options for different heading levels and styles. | Display | Planned |
Toggle Button toggle, Toggle / Switch, Toggle button... | allows users to toggle between two states (on/off), typically displayed as a sliding switch with visual feedback for the current state. | Form | Planned |
Toolbar Action Bar, Top Bar, Bar... | displays a list of items in a pivot format, typically used for navigation or content organization, with options for different styles and responsive behaviors. | Navigation | Planned |
Tooltip Toggle tip, Toggletip, Tool tip... | A small popup that appears when users hover over or focus on an element, providing additional information, context, or guidance about the element. | Feedback | Planned |
Tourtip | displays a small popup that appears when users hover over or focus on an element, providing additional information, context, or guidance about the element. | Display | Planned |
Tree View Document List, Entity List, Tree... | displays hierarchical data in a tree structure, with options for expanding/collapsing nodes, selection, and navigation through the hierarchy. | Data | Planned |
Truncate | displays a truncated text with options for different styles and responsive behaviors. | Display | Planned |
User Feedback | allows users to provide feedback or suggestions about a product or service, with options for different styles and interactive features. | Feedback | Planned |
Video Video player | displays a video player with options for different styles, playback controls, and responsive behaviors. | Display | Planned |
Wizard Multi-step Form | A multi-step form that guides users through a series of steps to complete a task. | Action | Planned |