# Examples

List of all available UI patterns and example templates.

- [template-auth](https://nvidia.github.io/elements/context/examples/template-auth.md): Page-level starter for sign-in pages. Centered card with email, password, OAuth options, and signup link.
- [template-chat](https://nvidia.github.io/elements/context/examples/template-chat.md): Page-level starter for chat experiences. Conversation list, message thread, and prompt composer.
- [template-code-editor](https://nvidia.github.io/elements/context/examples/template-code-editor.md): Page-level starter for IDE-style editors. File tree, tabbed code editor, and console panel.
- [template-dashboard](https://nvidia.github.io/elements/context/examples/template-dashboard.md): Page-level starter for analytics dashboards. KPI cards, sparkline trends, and an activity grid.
- [template-detail-view](https://nvidia.github.io/elements/context/examples/template-detail-view.md): Page-level starter for object detail views. Breadcrumb, summary metadata, and grouped content sections.
- [template-docs](https://nvidia.github.io/elements/context/examples/template-docs.md): Page-level starter for developer docs. Search header, hierarchical nav tree, and an article with prose and code samples.
- [template-list-view](https://nvidia.github.io/elements/context/examples/template-list-view.md): Page-level starter for tabular list views. Search, view toggle, and a sortable data grid of records.
- [template-media-detail-view](https://nvidia.github.io/elements/context/examples/template-media-detail-view.md): Page-level starter for object detail views with media playback. Player canvas with metadata panel and playback controls.
- [template-split-view](https://nvidia.github.io/elements/context/examples/template-split-view.md): Page-level starter for master-detail split views. Data grid of records with a resizable detail panel for the selected row.
- [template-wizard](https://nvidia.github.io/elements/context/examples/template-wizard.md): Page-level starter for multi-step wizards. Stepper, form sections, and footer navigation.
- [pattern-authentication-login-form](https://nvidia.github.io/elements/context/examples/pattern-authentication-login-form.md): Login form with email and password fields with credential validation. Use for authentication entry points where real-time feedback guides users through sign-in requirements.
- [pattern-authentication-login-page](https://nvidia.github.io/elements/context/examples/pattern-authentication-login-page.md): Full login page layout with centered card form using nve-page for responsive page structure.
- [pattern-authentication-no-access](https://nvidia.github.io/elements/context/examples/pattern-authentication-no-access.md): Permission denied states informing users of access restrictions with a contact option.
- [pattern-dashboard-project-board](https://nvidia.github.io/elements/context/examples/pattern-dashboard-project-board.md): Project board with workflow stage columns for tracking items through a workflow / process pipeline. Use for project management views where teams need to visualize work-in-progress across sequential stages like build, test, and merge workflows.
- [pattern-dashboard-training-monitor](https://nvidia.github.io/elements/context/examples/pattern-dashboard-training-monitor.md): Dashboard masonry layout for monitoring workflows with KPI cards, sparkline trends, and a checkpoint evaluation grid. Use for real-time operational views where users need to scan progress and spot anomalies at a glance.
- [pattern-editor-diff-view](https://nvidia.github.io/elements/context/examples/pattern-editor-diff-view.md): Side-by-side diff view for comparing configuration changes between releases. Essential for reviewing updates before deploying new AV sensor calibrations or robot parameters.
- [pattern-editor-file-browser](https://nvidia.github.io/elements/context/examples/pattern-editor-file-browser.md): IDE-style layout with file tree navigation, code editor, and output panel. Ideal for browsing and editing AV sensor configuration files in a familiar development environment.
- [pattern-editor-read-only](https://nvidia.github.io/elements/context/examples/pattern-editor-read-only.md): Reviewing deployed configurations or viewing session logs in a read-only code viewer. Prevents accidental edits while allowing full code navigation and search.
- [pattern-empty-states-data-grid-retry](https://nvidia.github.io/elements/context/examples/pattern-empty-states-data-grid-retry.md): Data grid empty state with retry action. Use when requested data is not found and a retry action is available.
- [pattern-empty-states-empty-data](https://nvidia.github.io/elements/context/examples/pattern-empty-states-empty-data.md): First-time or empty collection states with an illustration and call-to-action to guide users.
- [pattern-empty-states-no-results](https://nvidia.github.io/elements/context/examples/pattern-empty-states-no-results.md): No search results match to suggest refining filters or clearing search criteria.
- [pattern-empty-states-offline-mode](https://nvidia.github.io/elements/context/examples/pattern-empty-states-offline-mode.md): Use to show offline mode with information about limited functionality and last sync time.
- [pattern-heatmap-occupancy-detection-heatmap](https://nvidia.github.io/elements/context/examples/pattern-heatmap-occupancy-detection-heatmap.md): Grid heatmap displaying occupancy probability for dynamic obstacle detection across a spatial coordinate grid. Ideal for robotics and AV perception teams visualizing sensor fusion output to identify high-occupancy zones and detection blind spots using viridis scale.
- [pattern-heatmap-sensor-coverage-heatmap](https://nvidia.github.io/elements/context/examples/pattern-heatmap-sensor-coverage-heatmap.md): Grid heatmap showing sensor coverage for autonomous vehicle perception systems across distance ranges. Useful for AV engineers analyzing LiDAR, radar, and camera fusion performance to identify blind spots.
- [pattern-keyboard-shortcuts-shortcut-filled](https://nvidia.github.io/elements/context/examples/pattern-keyboard-shortcuts-shortcut-filled.md): Keyboard shortcut badge with filled styling for displaying key combinations. Use in help dialogs, onboarding tooltips, or documentation to communicate available shortcuts to users.
- [pattern-logging-event-timeline](https://nvidia.github.io/elements/context/examples/pattern-logging-event-timeline.md): Chronological event timeline with severity-coded entries for monitoring system events. Use for reviewing operational logs where temporal ordering and quick severity scanning are critical.
- [pattern-media-audio-player-card](https://nvidia.github.io/elements/context/examples/pattern-media-audio-player-card.md): Compact audio player controls with playback controls, and timestamp display. Ideal for reviewing audio logs, voice commands, or alert sounds.
- [pattern-media-page-layout-video](https://nvidia.github.io/elements/context/examples/pattern-media-page-layout-video.md): Full-page video player layout with metadata panel and playback controls. Use for reviewing recordings that requires detailed contextual information.
- [pattern-media-playback-control](https://nvidia.github.io/elements/context/examples/pattern-media-playback-control.md): Playback transport controls with start, rewind, play, fast forward, and end buttons in a flat button group. Use as the core navigation component in media players, simulation reviewers, or timeline-based interfaces.
- [pattern-media-playback-speed-control](https://nvidia.github.io/elements/context/examples/pattern-media-playback-speed-control.md): Playback speed control using a rounded button group with preset speed options for audio and video playback. Use when toolbar space allows discrete speed buttons and users need to see all options at once.
- [pattern-media-playback-speed-menu-control](https://nvidia.github.io/elements/context/examples/pattern-media-playback-speed-menu-control.md): Compact playback speed control using a flat select dropdown for audio and video playback. Use when toolbar space is tight and a dropdown works better than a button group for speed selection.
- [pattern-media-time-scrubber-control](https://nvidia.github.io/elements/context/examples/pattern-media-time-scrubber-control.md): Time scrubber with current position, range slider, and total duration for audio and video playback. Use in media players where users need to seek to a specific timestamp or scan through recorded content.
- [pattern-media-video-player-card](https://nvidia.github.io/elements/context/examples/pattern-media-video-player-card.md): Standard video player with playback controls, timeline scrubber, and volume controls. Use for reviewing recorded sensor data, simulation playback, or training video content.
- [pattern-media-volume-control](https://nvidia.github.io/elements/context/examples/pattern-media-volume-control.md): Volume control with mute toggle and range slider for audio playback. Use in media players, video reviewers, or any interface where users need fine-grained audio level control.
- [pattern-media-zoom-control](https://nvidia.github.io/elements/context/examples/pattern-media-zoom-control.md): Zoom level control with zoom-out, range slider, and zoom-in buttons for video and canvas content. Use in media viewers, map interfaces, or image editors where users need precise zoom control.
- [pattern-navigation-complex-tree-navigation](https://nvidia.github.io/elements/context/examples/pattern-navigation-complex-tree-navigation.md): Tree integrated in vertical navigation. Use for providing structured sidebar navigation for application layouts and content organization.
- [pattern-navigation-drawer-navigation](https://nvidia.github.io/elements/context/examples/pattern-navigation-drawer-navigation.md): Drawer based navigation. Use for secondary or mobile navigation when available space gets tight.
- [pattern-onboarding-multi-step-form-wizard](https://nvidia.github.io/elements/context/examples/pattern-onboarding-multi-step-form-wizard.md): Multi-step wizard layout. Use for complex multi-step forms with validation, progress, and save checkpoints.
- [pattern-onboarding-user-onboarding-wizard](https://nvidia.github.io/elements/context/examples/pattern-onboarding-user-onboarding-wizard.md): Multi-step wizard layout with progress stepper for guided workflows. Use for onboarding flows, enrollment forms, or configuration processes where users complete sequential steps with clear progress tracking.
- [pattern-panel-accordion](https://nvidia.github.io/elements/context/examples/pattern-panel-accordion.md): Organizing filterable, collapsible content groups in a panel with search input and expandable accordion sections.
- [pattern-panel-key-value](https://nvidia.github.io/elements/context/examples/pattern-panel-key-value.md): Displaying metadata like release info, dates, status badges, and links in a side panel with labeled key-value pairs.
- [pattern-panel-tabbed-header](https://nvidia.github.io/elements/context/examples/pattern-panel-tabbed-header.md): Switching between categorized detail views with tabbed navigation in the panel header.
- [pattern-search-filter-toolbar](https://nvidia.github.io/elements/context/examples/pattern-search-filter-toolbar.md): Search toolbar with filter functionality including progressive filter chips and search combobox for data filtering scenarios.
- [pattern-subheader-standard-header-main-page](https://nvidia.github.io/elements/context/examples/pattern-subheader-standard-header-main-page.md): Main page subheaders with breadcrumb, page title, and action buttons in a clean two-row layout.
- [pattern-subheader-standard-header-viewer-page](https://nvidia.github.io/elements/context/examples/pattern-subheader-standard-header-viewer-page.md): Viewer page subheader with centered zoom/layout controls and grouped action buttons. Ideal for media viewers, document previews, and split-pane layouts.
- [pattern-trend-badge](https://nvidia.github.io/elements/context/examples/pattern-trend-badge.md): Trend badges for displaying data changes and metrics. Perfect for dashboards, analytics, or financial data showing positive, negative, or neutral trends.
- [pattern-trend-badge-detail](https://nvidia.github.io/elements/context/examples/pattern-trend-badge-detail.md): Displays a metric with a trend indicator. Ideal for dashboards and analytics where users need to quickly assess changes and understand the scale of change at a glance.
- [pattern-trend-card](https://nvidia.github.io/elements/context/examples/pattern-trend-card.md): Trend card for displaying a metric with a trend indicator. Ideal for dashboards and analytics where users need to quickly assess changes and understand the scale of change at a glance.
- [pattern-trend-grid](https://nvidia.github.io/elements/context/examples/pattern-trend-grid.md): Trend grid for displaying a list of metrics with a trend indicator. Ideal for dashboards and analytics where users need to quickly assess changes and understand the scale of change at a glance.
- [page](https://nvidia.github.io/elements/context/examples/page.md): Nve-page layout with a header and main content.
- [page-document-scroll](https://nvidia.github.io/elements/context/examples/page-document-scroll.md): Use document scroll for static content sites that do not require a fixed navigation.
- [page-header](https://nvidia.github.io/elements/context/examples/page-header.md): Page header with logo, navigation links, and user actions in a standard layout structure.
- [page-header-app-logo](https://nvidia.github.io/elements/context/examples/page-header-app-logo.md): Use the Logo element when representing an application that is part of a suite of applications in a given problem domain.
- [page-header-center-navigation](https://nvidia.github.io/elements/context/examples/page-header-center-navigation.md): Page header with navigation centered in the available space for balanced visual hierarchy.
- [page-header-dropdown-menu](https://nvidia.github.io/elements/context/examples/page-header-dropdown-menu.md): Use dropdowns and menus to allow progressive disclosure of extra navigation or global user actions.
- [page-header-menu-button](https://nvidia.github.io/elements/context/examples/page-header-menu-button.md): Use a Icon Button to represent collapsible top-level navigation, optimal for mobile or constrained viewport sizes.
- [page-header-prefix-navigation](https://nvidia.github.io/elements/context/examples/page-header-prefix-navigation.md): Page header with primary navigation positioned after the logo and branding area.
- [page-header-search](https://nvidia.github.io/elements/context/examples/page-header-search.md): Page header with integrated search functionality for content discovery within the application.
- [page-header-suffix-navigation](https://nvidia.github.io/elements/context/examples/page-header-suffix-navigation.md): Page header with all navigation positioned at the end for common and persistent user actions between page navigation.
- [page-header-user-detail](https://nvidia.github.io/elements/context/examples/page-header-user-detail.md): Page header displaying user information and avatar for personalized application experiences.
- [page-interaction-drawer](https://nvidia.github.io/elements/context/examples/page-interaction-drawer.md): Use Drawer to create navigation that is outside the context of the current view.
- [page-interaction-panel-navigation](https://nvidia.github.io/elements/context/examples/page-interaction-panel-navigation.md): Use Page Panel with Toolbar to create complex navigation groups that are within the context of the current view.
- [page-invoker-command](https://nvidia.github.io/elements/context/examples/page-invoker-command.md): Use Page Panel with Invoker Command API to dynamically open and close page panels.
- [page-layout-editor](https://nvidia.github.io/elements/context/examples/page-layout-editor.md): IDE-style editor layout with file outline, main editor, and console panels. Use for code playgrounds, configuration editors, or development tools that need a split-pane workspace with toolbar controls.
- [page-loader](https://nvidia.github.io/elements/context/examples/page-loader.md): Full-page loading indicator displaying centered spinner for initial page load states.
- [page-loader-interactive](https://nvidia.github.io/elements/context/examples/page-loader-interactive.md): Interactive page loader that starts programmatically via button click. Use when user actions such as form submissions, data refreshes, or navigation events start loading states rather than on initial page load.
- [page-panel-closable](https://nvidia.github.io/elements/context/examples/page-panel-closable.md): Closable page panels that fully remove from the layout when dismissed. Use when panels open on demand for temporary tasks like viewing item details or applying filters, and the user needs full main content space when done.
- [page-panel-expandable](https://nvidia.github.io/elements/context/examples/page-panel-expandable.md): Expandable page panels that collapse to a slim strip and toggle open with chevron buttons. Use when panels contain supplementary content that users access intermittently, preserving main content space while keeping panels accessible.
- [page-panel-headings](https://nvidia.github.io/elements/context/examples/page-panel-headings.md): Page panel with title and subtitle headings in the header for labeling panel content. Use to provide clear context about what the panel contains, such as a details pane or properties inspector.
- [page-panel-tabs](https://nvidia.github.io/elements/context/examples/page-panel-tabs.md): Page panel with tabbed header for switching between categorized content views within a sidebar. Use when a panel contains related sections like outline, search, and settings that share the same screen region.
- [page-resize](https://nvidia.github.io/elements/context/examples/page-resize.md): Resizable left panel with drag handle for adjustable sidebar width. Use when users need to control the balance between navigation or outline panels and main content area.
- [page-resize-multi](https://nvidia.github.io/elements/context/examples/page-resize-multi.md): Multi-panel resizable layout with independent drag handles on left, right, and bottom panels. Use for complex workspaces like IDEs or dashboards where users need to customize the size of each content region independently.
- [page-resize-snap](https://nvidia.github.io/elements/context/examples/page-resize-snap.md): Resize handle with snap-to-boundary behavior on double-click for quickly toggling a panel between collapsed and expanded states. Use for detail panels that users frequently show and hide.
- [page-slot-subheader-large](https://nvidia.github.io/elements/context/examples/page-slot-subheader-large.md): Large subheader panel with back navigation, title, metadata, and action buttons. Use for detail pages that need prominent context like entity names, status badges, and key-value metadata above the main content.
- [page-slots](https://nvidia.github.io/elements/context/examples/page-slots.md): Page layout slot reference showing all available panel positions including header, subheader, left, right, bottom, and aside regions. Use as a starting point for understanding how to compose complex application layouts.
- [accordion](https://nvidia.github.io/elements/context/examples/accordion.md): Accordion component for collapsible content sections. Use accordions to progressively disclose information, helping users focus on relevant content while keeping the interface compact and scannable.
- [accordion-with-actions](https://nvidia.github.io/elements/context/examples/accordion-with-actions.md): Accordion with action buttons in header for quick operations without expanding. Perfect for list items where users need both to view details and perform actions like edit, delete, or add, keeping common actions immediately accessible.
- [alert](https://nvidia.github.io/elements/context/examples/alert.md): Alert for inline informational messages. Use alerts for persistent feedback that doesn't auto-dismiss, ideal for system status updates, or contextual information that users may need to reference while completing tasks.
- [alert-invoker-command](https://nvidia.github.io/elements/context/examples/alert-invoker-command.md): Dismissible alerts using the Invoker Command API for declarative close behavior. Use `commandfor` and `command="--close"` on action buttons to dismiss individual alerts without custom JavaScript event handling.
- [avatar](https://nvidia.github.io/elements/context/examples/avatar.md): Avatar component with text initials, providing a simple way to represent users when profile images are unavailable.
- [badge](https://nvidia.github.io/elements/context/examples/badge.md): Badge component with default styling. Use for simple non-interactive labels or status indicators.
- [breadcrumb](https://nvidia.github.io/elements/context/examples/breadcrumb.md): Breadcrumb navigation showing page hierarchy with linked items and current location indicator.
- [breadcrumb-with-icon-button](https://nvidia.github.io/elements/context/examples/breadcrumb-with-icon-button.md): Breadcrumb with home icon button for quick navigation to the root page, offering a compact starting point.
- [breadcrumb-with-menu](https://nvidia.github.io/elements/context/examples/breadcrumb-with-menu.md): Breadcrumb with overflow menu for collapsed navigation levels, ideal for deep hierarchies in limited space.
- [button](https://nvidia.github.io/elements/context/examples/button.md): Button component with standard appearance and behavior for primary user actions.
- [button-contrast-colored-backgrounds](https://nvidia.github.io/elements/context/examples/button-contrast-colored-backgrounds.md): Use standard interaction styling to keep buttons readable on contrasting backgrounds in light and dark themes. This pattern verifies the static button colors that deliver the intended contrast for each theme.
- [button-form-control](https://nvidia.github.io/elements/context/examples/button-form-control.md): Use the form control option for buttons that open custom controls such as dropdowns, filter menus, or pickers within a form layout. This pattern keeps the UI cohesive and helps users recognize the button as part of the form.
- [button-group-action-split](https://nvidia.github.io/elements/context/examples/button-group-action-split.md): Split button groups with different interaction styles for primary actions with dropdown alternatives.
- [button-group-action-split-rounded](https://nvidia.github.io/elements/context/examples/button-group-action-split-rounded.md): Split button groups with rounded container styling for softer visual appearance and modern aesthetics.
- [button-group-disabled](https://nvidia.github.io/elements/context/examples/button-group-disabled.md): Button group in disabled state for indicating unavailable actions or read-only contexts.
- [button-invoker-command](https://nvidia.github.io/elements/context/examples/button-invoker-command.md): Use the `commandfor` and `command` attributes to trigger custom Invoker Commands, such as rotating an image.
- [card](https://nvidia.github.io/elements/context/examples/card.md): Card component with header, content, and footer sections. Use this as a starting point for simple content containers.
- [chat-message-prefix-suffix](https://nvidia.github.io/elements/context/examples/chat-message-prefix-suffix.md): Chat conversation with prefix and suffix avatars. Ideal for multi-user chat applications where you need to distinguish between different participants.
- [checkbox](https://nvidia.github.io/elements/context/examples/checkbox.md): Checkbox component with label for binary selection and form input.
- [color](https://nvidia.github.io/elements/context/examples/color.md): Color picker input with label and message for selecting hex color values.
- [combobox](https://nvidia.github.io/elements/context/examples/combobox.md): Combobox with search input and datalist options for filtering and selection.
- [combobox-create-options](https://nvidia.github.io/elements/context/examples/combobox-create-options.md): Combobox with create option behavior that allows users to add new options and tags on the fly. Use when the option list is not exhaustive and users need to enter values that don't yet exist.
- [combobox-dynamic-typeahead-search](https://nvidia.github.io/elements/context/examples/combobox-dynamic-typeahead-search.md): Fetches options asynchronously as the user types, cancelling stale requests with AbortController. Use for server-backed search where the full option set is too large to load up front.
- [combobox-footer](https://nvidia.github.io/elements/context/examples/combobox-footer.md): Multi-select with footer action button for extra operations on selected items.
- [combobox-form](https://nvidia.github.io/elements/context/examples/combobox-form.md): Complete form integration showing combobox with form submission, reset, and programmatic value setting.
- [combobox-infinite-scroll](https://nvidia.github.io/elements/context/examples/combobox-infinite-scroll.md): Infinite scroll combobox loading, using the scroll event to append options as the user nears the end of the list. Use for server-backed datasets where loading all options up front is impractical.
- [combobox-reset](https://nvidia.github.io/elements/context/examples/combobox-reset.md): Multi-select with reset functionality via icon button and footer button to clear all selections.
- [combobox-select-all](https://nvidia.github.io/elements/context/examples/combobox-select-all.md): Multi-select with bulk selection controls (Select All/Deselect All) in footer for efficient mass operations.
- [date](https://nvidia.github.io/elements/context/examples/date.md): Date picker input with label and message for selecting calendar dates.
- [date-range](https://nvidia.github.io/elements/context/examples/date-range.md): Date range input with start and end date pickers for selecting time periods and date intervals.
- [date-types](https://nvidia.github.io/elements/context/examples/date-types.md): Collection of temporal input types including date, datetime, month, week, time, and date range pickers.
- [datetime](https://nvidia.github.io/elements/context/examples/datetime.md): Datetime picker input with label and message for selecting both date and time values.
- [dialog](https://nvidia.github.io/elements/context/examples/dialog.md): Modal dialog for focused user interactions. Use dialogs for confirmations, simple forms, or important information that requires user attention before continuing, creating a modal overlay that blocks interaction with the underlying page until dismissed.
- [dialog-invoker-command](https://nvidia.github.io/elements/context/examples/dialog-invoker-command.md): Use the `commandfor` and `command` attributes to trigger custom Invoker Commands, such as toggling a dialog.
- [divider](https://nvidia.github.io/elements/context/examples/divider.md): Horizontal divider for separating content sections with a subtle line.
- [dot](https://nvidia.github.io/elements/context/examples/dot.md): Dot component with status indicator, providing a simple visual cue for process states and system status.
- [drawer](https://nvidia.github.io/elements/context/examples/drawer.md): Modal drawer with header, content, and footer sections. Use for displaying detailed information, forms, or settings that need more space than a dialog, typically sliding in from the side of the screen.
- [dropdown](https://nvidia.github.io/elements/context/examples/dropdown.md): Dropdown implementation using popovertarget attribute to connect trigger and dropdown. Useful for simple dropdown menus.
- [dropdown-group](https://nvidia.github.io/elements/context/examples/dropdown-group.md): Cascading dropdown menu group with nested submenus for hierarchical navigation.
- [dropdown-group-with-disabled-items](https://nvidia.github.io/elements/context/examples/dropdown-group-with-disabled-items.md): Cascading dropdown menu with disabled menu items in non-interactive states.
- [dropdown-group-with-icons](https://nvidia.github.io/elements/context/examples/dropdown-group-with-icons.md): Cascading dropdown menu with leading icons for visual identification of menu item types.
- [dropdown-group-with-more-icons](https://nvidia.github.io/elements/context/examples/dropdown-group-with-more-icons.md): Cascading dropdown menu showcasing extra icon varieties for diverse menu actions.
- [dropdown-menu](https://nvidia.github.io/elements/context/examples/dropdown-menu.md): Dropdown with popover-positioned menu for trigger-based actions. Use for context menus, settings, and user actions where content appears on demand relative to a trigger button.
- [dropzone](https://nvidia.github.io/elements/context/examples/dropzone.md): File dropzone with drag-and-drop area for file upload interactions.
- [dropzone-form](https://nvidia.github.io/elements/context/examples/dropzone-form.md): Dropzone integrated with form validation showing file type and size constraint errors.
- [file](https://nvidia.github.io/elements/context/examples/file.md): File input with label and validation message. Use for simple file upload fields in forms.
- [forms-actions-label-action](https://nvidia.github.io/elements/context/examples/forms-actions-label-action.md): Label with an information button to provide contextual help or more details about the field.
- [forms-actions-prefix-suffix](https://nvidia.github.io/elements/context/examples/forms-actions-prefix-suffix.md): Input with prefix and suffix buttons to show fixed text elements like URL protocols and domains.
- [forms-actions-search-clear](https://nvidia.github.io/elements/context/examples/forms-actions-search-clear.md): Input with action buttons for search and clear, providing quick access to common operations.
- [forms-horizontal](https://nvidia.github.io/elements/context/examples/forms-horizontal.md): Horizontal form layout with labels beside inputs, creating efficient use of horizontal space and familiar desktop form patterns.
- [forms-horizontal-inline](https://nvidia.github.io/elements/context/examples/forms-horizontal-inline.md): Space-efficient horizontal layout with inline labels, ideal for dense forms with tight vertical space where quick scanning matters.
- [forms-kitchen-sink](https://nvidia.github.io/elements/context/examples/forms-kitchen-sink.md): Comprehensive showcase of all form controls in a grid layout, including input types, states, and advanced patterns use for a complete form design reference.
- [forms-prominence-muted](https://nvidia.github.io/elements/context/examples/forms-prominence-muted.md): Use the prominence muted state to lower visual weight of controls in forms.
- [forms-validation-error-group](https://nvidia.github.io/elements/context/examples/forms-validation-error-group.md): Login form with grouped error display showing all validation issues together after submission attempt.
- [forms-validation-login-form](https://nvidia.github.io/elements/context/examples/forms-validation-login-form.md): Use real-time validation with contextual error messages to disable submit until form is valid.
- [forms-validation-reset-form](https://nvidia.github.io/elements/context/examples/forms-validation-reset-form.md): Form reset functionality allowing users to clear individual fields or reset the entire form.
- [forms-validation-success-group](https://nvidia.github.io/elements/context/examples/forms-validation-success-group.md): Login form example of success feedback with positive confirmation messages for valid input and successful form submission.
- [forms-vertical](https://nvidia.github.io/elements/context/examples/forms-vertical.md): Traditional vertical form layout with labels above inputs, providing clear visual hierarchy and optimal readability for complex forms.
- [forms-vertical-inline](https://nvidia.github.io/elements/context/examples/forms-vertical-inline.md): Compact vertical layout with inline labels and controls, maximizing space efficiency while maintaining form clarity and accessibility.
- [grid](https://nvidia.github.io/elements/context/examples/grid.md): Data grid for tabular data display with columns and rows. Use grids for presenting structured datasets where users need to scan, compare, and analyze information across many columns, such as dashboards, reports, or data management interfaces.
- [grid-bulk-actions](https://nvidia.github.io/elements/context/examples/grid-bulk-actions.md): Use bulk actions for operations on many items. Display only when rows have a selection. Closing bulk actions deselects all selected rows.
- [grid-card](https://nvidia.github.io/elements/context/examples/grid-card.md): Nest Grid in Cards for UI patterns such as card tab groups. Use the `container="flat"` attribute to enable proper styling of the grid when nested within a card.
- [grid-column-action](https://nvidia.github.io/elements/context/examples/grid-column-action.md): Create column actions by using the `nve-icon-button` to trigger dropdowns or panels that reveal more actions to the user.
- [grid-column-dynamic-fixed](https://nvidia.github.io/elements/context/examples/grid-column-dynamic-fixed.md): Dynamic column management with programmatic addition and positioning, for flexible grid configuration with evolving data requirements.
- [grid-column-fixed](https://nvidia.github.io/elements/context/examples/grid-column-fixed.md): Fix columns to any given side, but keep fixed columns from spanning past the half way point of the grid.
- [grid-column-multi-fixed](https://nvidia.github.io/elements/context/examples/grid-column-multi-fixed.md): Fix many columns to any given side, but keep fixed columns from spanning past the half way point of the grid.
- [grid-column-stack-fixed](https://nvidia.github.io/elements/context/examples/grid-column-stack-fixed.md): Stack and fix many columns to any given side, but keep fixed columns from spanning past the half way point of the grid.
- [grid-column-width](https://nvidia.github.io/elements/context/examples/grid-column-width.md): Column width control for responsive grid layouts, enabling flexible content sizing and optimal space usage across different screen sizes.
- [grid-display-settings](https://nvidia.github.io/elements/context/examples/grid-display-settings.md): Users can customize their data view through a dropdown menu above the grid,  allowing them to show/hide columns and restore default settings for a personalized experience.
- [grid-flat](https://nvidia.github.io/elements/context/examples/grid-flat.md): Flat container styling for minimal visual weight, providing subtle grid presentation that integrates seamlessly with surrounding content.
- [grid-footer](https://nvidia.github.io/elements/context/examples/grid-footer.md): The footer displays contextual information or extra user actions such as pagination.
- [grid-full](https://nvidia.github.io/elements/context/examples/grid-full.md): Full-width grid container for max space use, providing edge-to-edge data display for comprehensive information presentation.
- [grid-keynav](https://nvidia.github.io/elements/context/examples/grid-keynav.md): The datagrid follows the ARIA Authoring Practices Guide for standardized keyboard navigation.
- [grid-multi-select](https://nvidia.github.io/elements/context/examples/grid-multi-select.md): Multi-select rows with checkboxes for bulk operations. Use multi-select when users need to perform actions on many items at once (like delete, export, or bulk edit), placing checkboxes as the first column and setting the selected attribute for proper accessibility.
- [grid-pagination](https://nvidia.github.io/elements/context/examples/grid-pagination.md): Use the pagination pattern when working with large data sets that need incremental loading or filtering for performance or useability.
- [grid-panel-detail](https://nvidia.github.io/elements/context/examples/grid-panel-detail.md): Use a nve-page-panel when displaying advanced filtering or display settings for the grid. Item detail panels should be open using a action button placed at the end of the grid row.
- [grid-panel-grid](https://nvidia.github.io/elements/context/examples/grid-panel-grid.md): Panel Grid displays key value type data sets for details of a given item in a collection.
- [grid-placeholder](https://nvidia.github.io/elements/context/examples/grid-placeholder.md): Loading placeholder state with progress indicator. Use grid placeholders during initial data fetching or while loading large datasets, providing visual feedback that content is coming and preventing layout shift when rows populate, improving perceived performance.
- [grid-row-action](https://nvidia.github.io/elements/context/examples/grid-row-action.md): Row actions enable extra user actions specific to a given row. Place a `nve-icon-button` at the end of the grid row for actions.
- [grid-row-groups](https://nvidia.github.io/elements/context/examples/grid-row-groups.md): Expandable row groups for hierarchical data organization. Use row groups when items have parent-child relationships or nested details (like sessions with uploads, orders with line items), allowing users to progressively disclose details and maintain compact views of large hierarchies.
- [grid-row-sort](https://nvidia.github.io/elements/context/examples/grid-row-sort.md): Sortable columns with visual indicators for data organization. Use sort buttons on columns where sorting is meaningful (dates, numbers, names) to help users find patterns, identify outliers, or locate specific data points, supporting three states: none, ascending, and descending.
- [grid-scroll-position](https://nvidia.github.io/elements/context/examples/grid-scroll-position.md): Programmatic scroll control using the grid `scrollTo` API. Use for scroll-to-top buttons, jump-to-row navigation, or restoring scroll position after data refreshes in large datasets.
- [grid-single-select](https://nvidia.github.io/elements/context/examples/grid-single-select.md): A single select datagrid allows users to choose exactly one row from a data table by providing radio buttons in the first column, ensuring only one item has a selection at a time. To enable single select, place `nve-radio` input as the first grid cell of each row. Set `name` attribute on each radio to ensure to associate the same radio group.
- [grid-sort-visibility](https://nvidia.github.io/elements/context/examples/grid-sort-visibility.md): Use the `nve-sort-button` to add grid row sort. The grid follows the ARIA sort spec and automatically sets the appropriate accessibility related attributes to convey the current sorting state.
- [icon](https://nvidia.github.io/elements/context/examples/icon.md): Icon component with standard appearance and usage for visual communication and interface navigation.
- [input](https://nvidia.github.io/elements/context/examples/input.md): Text input field with label and message for general text entry and form data collection.
- [input-input-group](https://nvidia.github.io/elements/context/examples/input-input-group.md): Input group combining select, input, and button for composite controls like domain URL entry.
- [input-input-group-filter-group-range](https://nvidia.github.io/elements/context/examples/input-input-group-filter-group-range.md): Input group with date range filters combining select and date inputs for filtering data by time periods.
- [logo](https://nvidia.github.io/elements/context/examples/logo.md): NVIDIA logo with aria-label for accessibility. Use for brand identification in headers, footers, and loading states.
- [menu](https://nvidia.github.io/elements/context/examples/menu.md): Menu with simple text items for the default menu structure and styling.
- [menu-complex](https://nvidia.github.io/elements/context/examples/menu-complex.md): Use a dropdown menu with search and branded logos for application selection interfaces.
- [menu-dropdown](https://nvidia.github.io/elements/context/examples/menu-dropdown.md): Menu with keyboard navigation and ARIA disclosure pattern inside a dropdown. Use when menu items need accessible focus management and arrow key navigation.
- [menu-vertical-navigation-drawer](https://nvidia.github.io/elements/context/examples/menu-vertical-navigation-drawer.md): Use a navigation drawer to overlay page content for out-of-context navigation.
- [menu-vertical-navigation-panel](https://nvidia.github.io/elements/context/examples/menu-vertical-navigation-panel.md): Use an inline navigation panel to push page content aside when navigation is contextual to the page.
- [monaco-diff-input-json-schema-validation](https://nvidia.github.io/elements/context/examples/monaco-diff-input-json-schema-validation.md): JSON diff input with schema validation in a form context, blocking submission on errors
- [monaco-diff-input-type-script-validation](https://nvidia.github.io/elements/context/examples/monaco-diff-input-type-script-validation.md): TypeScript diff input with real-time type checking that blocks form submission on errors
- [monaco-input-json-schema-validation](https://nvidia.github.io/elements/context/examples/monaco-input-json-schema-validation.md): JSON input with schema validation that blocks form submission on validation errors
- [monaco-input-type-script-validation](https://nvidia.github.io/elements/context/examples/monaco-input-type-script-validation.md): TypeScript input with real-time type checking that blocks form submission on type errors
- [month](https://nvidia.github.io/elements/context/examples/month.md): Month picker with label and validation message. Use for selecting a month and year in forms, such as expiry dates or report periods.
- [notification](https://nvidia.github.io/elements/context/examples/notification.md): Notification with auto-dismiss timeout for temporary feedback messages. Use notifications for system-generated alerts, confirmations, or status updates that don't require immediate user action, automatically dismissing after a set duration.
- [pagination](https://nvidia.github.io/elements/context/examples/pagination.md): Pagination component with default styling and behavior.
- [pagination-custom-select-pattern](https://nvidia.github.io/elements/context/examples/pagination-custom-select-pattern.md): Custom pagination with select dropdown for page size and navigation arrows.
- [pagination-forms](https://nvidia.github.io/elements/context/examples/pagination-forms.md): Pagination as a form associated component that participates in form submission and emits change, input, and step-change events. Use when page selection needs to integrate with form data collection or server-side form handling.
- [pagination-page-list-pattern](https://nvidia.github.io/elements/context/examples/pagination-page-list-pattern.md): Custom pagination pattern using toolbar with numbered page buttons and navigation arrows.
- [pagination-skip-pattern](https://nvidia.github.io/elements/context/examples/pagination-skip-pattern.md): Enhanced pagination pattern with first/last page buttons and numbered page navigation.
- [panel](https://nvidia.github.io/elements/context/examples/panel.md): Panel layout with header showing session details and metadata in a collapsible side panel.
- [password](https://nvidia.github.io/elements/context/examples/password.md): Password input with toggle visibility for secure credential entry and authentication forms.
- [preferences-input-dropdown](https://nvidia.github.io/elements/context/examples/preferences-input-dropdown.md): Preferences input embedded in a dropdown menu triggered from a page header settings button.
- [preferences-input-forms](https://nvidia.github.io/elements/context/examples/preferences-input-forms.md): Preferences input integrated with form submission, displaying live JSON value updates.
- [progress-bar-labeled](https://nvidia.github.io/elements/context/examples/progress-bar-labeled.md): Use a labeled progress bar with percentage display to communicate upload or task status.
- [progressive-filter-chip-custom](https://nvidia.github.io/elements/context/examples/progressive-filter-chip-custom.md): Progressive filter chip with custom button trigger opening a map coordinate picker dropdown.
- [progressive-filter-chip-date-range](https://nvidia.github.io/elements/context/examples/progressive-filter-chip-date-range.md): Progressive filter chip with date picker inputs for filtering by date range criteria.
- [progressive-filter-chip-text-input](https://nvidia.github.io/elements/context/examples/progressive-filter-chip-text-input.md): Progressive filter chip with numeric text input for threshold-based filtering (greater than, less than).
- [progressive-filter-chip-validation](https://nvidia.github.io/elements/context/examples/progressive-filter-chip-validation.md): Progressive filter chip with input validation states showing required field and error styling.
- [pulse](https://nvidia.github.io/elements/context/examples/pulse.md): Animated pulse indicator with aria-label for accessibility. Use to draw attention to live updates, active connections, or real-time status.
- [radio](https://nvidia.github.io/elements/context/examples/radio.md): Radio button group for mutually exclusive single-choice selection from many options.
- [range](https://nvidia.github.io/elements/context/examples/range.md): Range component for numeric value selection, providing a simple slider interface for adjusting values within a defined range.
- [search](https://nvidia.github.io/elements/context/examples/search.md): Search input with label and message for query entry and filtering data.
- [select](https://nvidia.github.io/elements/context/examples/select.md): Select component with label, options, and message.
- [skeleton](https://nvidia.github.io/elements/context/examples/skeleton.md): Skeleton component for text content. Placeholder lines appear while content loads.
- [sparkline](https://nvidia.github.io/elements/context/examples/sparkline.md): Sparkline from numeric array values. Use as a compact trend indicator.
- [sparkline-data-grid](https://nvidia.github.io/elements/context/examples/sparkline-data-grid.md): Embed sparklines in grid cells to add compact trend context to tabular data.
- [sparkline-default-size](https://nvidia.github.io/elements/context/examples/sparkline-default-size.md): Without a size attribute, height scales with the parent text size for typographic alignment.
- [steps](https://nvidia.github.io/elements/context/examples/steps.md): Interactive step indicator with status colors for multi-step workflows. Use for wizards, onboarding flows, or process tracking where users can navigate between steps.
- [styles-layout-spacing](https://nvidia.github.io/elements/context/examples/styles-layout-spacing.md): 
- [styles-typography-transforms](https://nvidia.github.io/elements/context/examples/styles-typography-transforms.md): Text transformation utilities for case changes and truncation to handle overflow gracefully.
- [switch](https://nvidia.github.io/elements/context/examples/switch.md): Toggle switch for binary on/off controls and feature activation.
- [tabs](https://nvidia.github.io/elements/context/examples/tabs.md): Tabs group component for organizing content into selectable sections with disabled state support.
- [tabs-external-controls](https://nvidia.github.io/elements/context/examples/tabs-external-controls.md): Drive the same tabs group from external buttons when layouts need tabs and secondary actions to stay in sync with structured panel content.
- [tag](https://nvidia.github.io/elements/context/examples/tag.md): Tag component for interactive labeling and categorizing of content, providing clear visual organization and metadata display.
- [textarea](https://nvidia.github.io/elements/context/examples/textarea.md): Multi-line text input for longer content entry like comments, descriptions, or messages.
- [time](https://nvidia.github.io/elements/context/examples/time.md): Time input with label, min/max time constraints, and help message
- [toast](https://nvidia.github.io/elements/context/examples/toast.md): Toast with auto-dismiss for brief, non-critical feedback messages. Use toasts for lightweight confirmations like "Saved", "Copied", or "Action complete" that inform users without requiring interaction or disrupting workflow.
- [toggletip](https://nvidia.github.io/elements/context/examples/toggletip.md): Toggletip requiring click to open and close. Unlike tooltips that appear on hover, use toggletips for interactive content, extra details, or when users need time to read or interact with the popover content.
- [toolbar](https://nvidia.github.io/elements/context/examples/toolbar.md): Toolbar with action buttons and a settings icon in the suffix slot.
- [toolbar-container-flat](https://nvidia.github.io/elements/context/examples/toolbar-container-flat.md): Toolbar with flat container styling for a more subtle appearance.
- [toolbar-container-full](https://nvidia.github.io/elements/context/examples/toolbar-container-full.md): Toolbar with full container styling that spans the entire width.
- [toolbar-container-inset](https://nvidia.github.io/elements/context/examples/toolbar-container-inset.md): Toolbar with inset container styling and constrained width for contained layouts.
- [toolbar-groups](https://nvidia.github.io/elements/context/examples/toolbar-groups.md): Complex toolbar with grouped controls including select dropdowns, button groups, and dividers for text editing scenarios.
- [toolbar-status](https://nvidia.github.io/elements/context/examples/toolbar-status.md): Toolbar with status styling showing selection state with accent status and default status variants for bulk actions.
- [toolbar-vertical](https://nvidia.github.io/elements/context/examples/toolbar-vertical.md): Vertical toolbar orientation with button groups and dividers for sidebar layouts.
- [tooltip](https://nvidia.github.io/elements/context/examples/tooltip.md): Tooltip triggered by popovertarget attribute. Use for providing brief, contextual information on hover or focus without cluttering the interface.
- [tree](https://nvidia.github.io/elements/context/examples/tree.md): Tree component with expandable nodes, providing hierarchical data display and navigation for structured content organization.
- [tree-node-content](https://nvidia.github.io/elements/context/examples/tree-node-content.md): Tree with rich node content including forms, controls, and interactive elements, enabling complex data management within hierarchical structures.
- [week](https://nvidia.github.io/elements/context/examples/week.md): Week picker input for selecting specific weeks in a year for scheduling and planning.