Enterprise Bootstrap Theme

Ribbon Studio App

Design ribbon toolbars visually. Save, load, export JSON/Markdown.

Layout Studio App

Compose UI mockups with real components in device frames.

Shape Studio App

Create custom vector shapes with Pen, Brush, and Draw tools.

Component Studio App

Live component playground — place, configure, and screenshot real components.

AnglePicker Demo

Circular dial input for selecting angles from 0 to 360 degrees.

ColorPicker Demo

Canvas-based colour selection control with saturation/brightness gradient.

CronPicker Demo

Visual builder for extended 6-field CRON expressions.

DatePicker Demo

Calendar date picker with day, month, and year navigation views.

DurationPicker Demo

Duration/interval picker with configurable unit patterns and ISO 8601 support.

LineEndingPicker Demo

Dropdown picker for line ending (arrowhead/marker) styles.

LineShapePicker Demo

Dropdown picker for line shape/routing patterns.

LineTypePicker Demo

Dropdown picker for line dash patterns.

LineWidthPicker Demo

Dropdown picker for line widths with visual CSS border previews.

PeoplePicker Demo

Searchable person selector for share dialogs and assignment fields.

PeriodPicker Demo

Coarse time-period selector for enterprise project planning.

SprintPicker Demo

Agile sprint selector with list and calendar views.

SymbolPicker Demo

Grid-based symbol and icon picker for Unicode and Bootstrap Icons.

TimePicker Demo

Time-of-day picker with spinner columns and optional timezone selector.

TimezonePicker Demo

Searchable dropdown selector for IANA timezones with grouped regions.

OrientationPicker Demo

Dropdown picker for selecting page orientation (portrait/landscape).

SizesPicker Demo

Dropdown picker for selecting page/paper sizes with built-in presets.

MarginsPicker Demo

Dropdown picker for selecting page margin presets with visual previews.

ToolColorPicker Demo

Colour picker for drawing tools with tool-shaped icon and built-in colour packs.

ColumnsPicker Demo

Dropdown picker for selecting column layout presets with visual previews.

SpacingPicker Demo

Dropdown picker for selecting line spacing presets with visual previews.

EditableComboBox Demo

Combined text input and dropdown list component.

MaskedEntry Demo

Specialised input field that masks sensitive non-password data.

MultiselectCombo Demo

Multi-select combo box with filterable dropdown list.

SearchBox Demo

Debounced search input with search icon, clear button, loading spinner.

CodeEditor Demo

Bootstrap 5-themed code editor wrapping CodeMirror 6.

CommentOverlay Demo

Transparent overlay for anchoring comment pins to DOM elements.

LatexEditor Demo

LaTeX equation editor with visual and source modes, symbol palette, and styling toolbar.

FileUpload Demo

Drag-and-drop file upload zone with progress bars.

MarkdownEditor Demo

Bootstrap 5-themed Markdown editor wrapper around Vditor.

DataGrid Demo

High-performance flat data table with sorting, filtering, pagination.

FileExplorer Demo

Two-pane file navigation with folder tree sidebar and breadcrumb.

ExplorerPicker Demo

Resource-selection picker with tree browsing, search, and ontology-driven icons.

TreeView Demo

Highly configurable tree view for hierarchical data.

VisualTableEditor Demo

Visual table editor with cell formatting, presets, and aggregates.

ActivityFeed Demo

Social-style activity feed with date grouping and infinite scroll.

Gauge Demo

Visual measure component with tile, ring, and bar gauge variants.

Timeline Demo

Horizontal event timeline for point and span events.

GraphLegend Demo

Collapsible legend panel for graph visualizations with node and edge types.

GraphMinimap Demo

Miniature overview panel for graph visualizations with draggable viewport.

CommandPalette Demo

Keyboard-first command palette (Ctrl+K omnibar) with fuzzy matching.

FacetSearch Demo

Facet-aware search bar combining free-text with key:value query facets.

Tagger Demo

Freeform and controlled-vocabulary tag input with autocomplete.

ConfirmDialog Demo

General-purpose confirmation modal with promise-based API.

ErrorDialog Demo

Bootstrap 5 modal for literate error messages.

ProgressModal Demo

Modal dialog for long-running operations progress display.

EmptyState Demo

Centered placeholder shown when a view has no data.

SkeletonLoader Demo

Animated placeholder that mimics content layout during loading.

StatusBadge Demo

Colour-coded pills communicating process or system state.

Toast Demo

Transient, non-blocking notification system with stacking.

BannerBar Demo

Fixed-to-top viewport banner for service status announcements.

GraphToolbar Demo

Preconfigured toolbar for graph visualization applications.

StatusBar Demo

Fixed-to-bottom viewport status bar with label/value regions.

Toolbar Demo

Programmable action bar for grouping tools and actions.

InlineToolbar Demo

Compact inline toolbar for embedding inside container panels.

Sidebar Demo

Dockable, floatable, resizable sidebar panel container.

TabbedPanel Demo

Dockable, collapsible, resizable tabbed panel.

ContextMenu Demo

Theme-aware context menu with icons, shortcuts, sub-menus, and keyboard navigation.

UserMenu Demo

Avatar-triggered dropdown menu for user account actions.

WorkspaceSwitcher Demo

Dropdown or modal for switching between workspaces.

Conversation Demo

Turn-by-turn conversation UI for AI agent interactions.

PromptTemplateManager Demo

Two-pane CRUD interface for prompt templates.

ReasoningAccordion Demo

Collapsible accordion for AI chain-of-thought reasoning steps.

AnchorLayout Demo

Constraint-based layout with anchor relationships.

BorderLayout Demo

Five-region CSS Grid layout (N/S/E/W/Center).

BoxLayout Demo

Single-axis flex layout for sequential arrangement.

CardLayout Demo

Indexed-stack layout displaying one child at a time.

DockLayout Demo

CSS Grid-based layout coordinator for 5-zone app shells.

FlexGridLayout Demo

Advanced CSS Grid with mixed track sizes and cell spanning.

FlowLayout Demo

Wrapping flex layout that flows children to next line.

GridLayout Demo

Uniform CSS Grid layout with equal-sized cells.

LayerLayout Demo

Z-stack layout with children layered in z-order.

SplitLayout Demo

Split layout with draggable dividers for two or more panes.

TreeGrid Demo

Tree-grid hybrid for hierarchical data with columns.

StackLayout Demo

Vertically stacked collapsible panels with drag dividers.

AuditLogViewer Demo

Read-only filterable audit log viewer with severity badges.

PermissionMatrix Demo

Interactive RBAC permission matrix with roles as columns.

LogConsole Demo

Reusable in-app logging console for user actions and events.

ActionItems Demo

Rich, stateful action item list with status lifecycle.

AppLauncher Demo

Grid-based application launcher with three view modes.

Breadcrumb Demo

Hierarchical path display with clickable segments.

DiagramEngine Demo

Universal vector canvas engine for diagramming and drawing.

DocViewer Demo

Full-page three-column documentation layout.

FontDropdown Demo

Dropdown where each font name renders in its own typeface.

FormDialog Demo

Modal dialog optimized for form-based workflows.

GradientPicker Demo

Gradient colour picker with draggable stops, per-stop alpha, and presets.

GraphCanvas Demo

Interactive SVG graph visualization with layout algorithms.

GuidedTour Demo

Product walkthrough component wrapping Driver.js.

HelpDrawer Demo

Right-side sliding panel for in-context documentation.

HelpTooltip Demo

Small ? icon for in-context help.

Magnifier Demo

Cursor-following magnifying glass overlay.

NotificationCenter Demo

Aggregated notification panel with bell trigger.

PersonChip Demo

Compact inline element displaying a person's identity.

Pill Demo

Reusable inline pill element for mentions, issues, tags.

PresenceIndicator Demo

Compact overlapping avatar stack showing active viewers.

PropertyInspector Demo

Non-modal right-side panel for entity details.

RelationshipManager Demo

Component for managing typed relationships between entities.

Ribbon Demo

Microsoft Office-style tabbed toolbar for organizing commands.

RibbonBuilder Demo

Visual WYSIWYG editor for composing Ribbon layouts.

RichTextInput Demo

Lightweight contenteditable rich text input.

Ruler Demo

Canvas-based calibrated ruler with cursor tracking.

ShareDialog Demo

Modal dialog for sharing resources with access levels.

Slider Demo

Range input with single-value and dual-thumb modes.

SmartTextInput Demo

Behavioral middleware for trigger-based inline references.

SpineMap Demo

Interactive SVG capability map with central spine.

Stepper Demo

Step progression UI for multi-step processes.

ThemeToggle Demo

Compact three-state theme switcher (Light/Auto/Dark).

TypeBadge Demo

Small inline chip/badge that identifies an ontology type.