Components

New

Action Panel

A launch-style panel that groups high-emphasis actions into a responsive tile grid.

New

Action Panel Items Editor

A field-level editor for the action-panel items array with modal editing and drag reordering.

New

Color Helper

A component for displaying color swatches with information and copy functionality.

New

Color Picker

A compact editor for semantic theme tokens and custom colors with a live swatch preview.

New

Font Picker

A compact typography override editor for font family, size, and inline emphasis styles.

New

Icon Picker

A searchable property editor for selecting PrimeIcons or Lucide icons.

New

Card Basic

A simple card component with an icon, title, description, and action button.

New

Card Advanced

An advanced card component with image/media section, title, description, and action button.

New

Company Logo

A component for displaying the company logo with proper sizing and spacing.

New

Code Block

A component for rendering code samples with language labels and a built-in clipboard copy action.

New

Content Renderer

A registry-driven runtime renderer for QDS content documents in page or dashboard mode.

New

Content Designer

A registry-driven authoring workspace for content documents with palette, canvas, outline, properties, and preview flows.

Updated

Diagram Host

A container component for displaying and managing quantum circuit diagrams.

New

Diagram Manager

A full-screen diagram management interface with integrated file explorer and diagram viewer/editor.

New

Tree View

A tree view component for displaying hierarchical file and folder structures with expand/collapse functionality.

New

Feedback Button

A button component for collecting user feedback with customizable options.

Updated

Gradient Line

A decorative component that displays a gradient line with customizable colors.

New

Hero

A high-emphasis page introduction component with headline, supporting copy, media, and actions.

New

Help Button

A button component for accessing help documentation and resources.

Updated

Hierarchical Menu

A navigation menu component that supports nested menu items and dynamic content.

New

Horizontal Menu

A horizontal navigation menu that displays top-level items in a row with dropdown submenus.

New

Image Helper

A utility component for handling image loading, optimization, and fallbacks.

New

Icon Button

A flexible button component that accepts any PrimeIcons class as an attribute.

Updated

Main Toolbar

A responsive toolbar component for navigation and user controls.

New

Menu Spacer

A utility component for adding flexible spacing in menus and toolbars.

Updated

Notification Tray

A component for displaying and managing system notifications.

New

Page Frame

A layout component for structuring page content with header and footer.

New

Property Editor

A component for editing arbitrary JavaScript property objects with metadata-driven UI.

Updated

Settings Button

A button component for accessing application settings and preferences.

Updated

Sidebar Menu

A vertical navigation menu with optional icons, configurable section styling, and collapsible or always-expanded tree behavior.

New

Theme Switch

A toggle component for switching between light and dark themes.

New

Toast

A component for displaying temporary notification messages that overlay the UI.

Updated

User Avatar

A component for displaying user profile pictures and information.

New

Field

A layout container for form controls that owns the label, hint, and error text rhythm.

New

Text Input

A single-line text entry control with validation, clearable, character counter, and form association.

New

Rich Text Editor

A form-associated narrative editor with a curated, accessible formatting toolbar.

New

Numeric Input

Numeric, currency, and percentage entry with locale-aware formatting and steppers.

New

Select

A single or multi-choice dropdown with filtering, grouping, and keyboard navigation.

New

Checkbox

A binary and indeterminate choice control with full-row hit area and SVG glyphs.

New

Radio Group

A mutually exclusive choice group with one tab stop and arrow-key selection.

New

Date Picker

A date and date-range entry control with typed shorthand parsing and a calendar popover.

New

Form Grid

A responsive CSS Grid layout container for form fields with column spans and density modes.

New

Empty State

A message component for no-data, no-results, error, no-access, and done states.

New

Column Header

A sortable, resizable table header cell with tri-state sort and keyboard-accessible resize.

New

Pagination

A page navigation and page-size control with windowed number strips and compact mode.

New

Row Actions

Inline icon buttons and an overflow menu for per-row actions, revealed on hover and focus.

New

Data Table

A native HTML table component with sorting, selection, pagination, and row actions.

Note: Some components are still in development and will have documentation available in future updates.

Menu Components Demo

Check out our comprehensive menu components demo to see all three menu types (Hierarchical, Horizontal, and Sidebar) working together with the same data model.