Enterprise Bootstrap Theme

A compact, professional theme optimized for enterprise SaaS applications

Metrics Dashboard

Color Palette

Buttons

Status Badges

Forms

Toolbar

Data Table

Cards

Alerts

Pagination

Typography

Heading 1 — Inter

Heading 2 — Inter

Heading 3 — Inter

Heading 4 — Inter

Heading 5 — Inter

Heading 6 — Inter

Body text in Inter at the base font size (14px / 0.875rem). This paragraph demonstrates the default line height, letter spacing, and word spacing of the theme. The quick brown fox jumps over the lazy dog. 0123456789.

Small muted text for captions, metadata, and secondary information.

Bold text and italic text and a hyperlink.

Fixed-width text in JetBrains Mono:

const config = {
    theme: "enterprise",
    fontFamily: "Inter",
    baseFontSize: "0.875rem",  // 14px
    borderRadius: 0,
    spacer: "0.75rem"          // 12px
};

Inline code: npm run build, $font-size-base: 0.875rem, border-radius: 0.

Error Dialog

Literate error dialogs that show user-friendly messages with collapsible technical details.

Editable Combo Box

A combined text input and dropdown that supports free text entry, substring filtering, keyboard navigation, and item grouping.

Date Picker

A calendar date picker with day, month, and year navigation views. Supports manual input, configurable format, week numbers, and locale-aware first day of week.

Time Picker

A time-of-day picker with spinner columns for hours, minutes, and seconds. Supports 12/24-hour formats and optional timezone selection.

Duration Picker

A configurable duration/interval picker supporting various unit patterns and ISO 8601 input/output.

Period Picker

A coarse time-period selector for project planning. Select months, quarters, halves, or years with automatic date resolution based on start/end mode.

Sprint Picker

An agile sprint selector with list and calendar views. Computes sprints from an anchor date and sprint length, with configurable naming modes.

TypeBadge

Small inline chip/badge that visually identifies an ontology type. 3 sizes (sm/md/lg) and 3 variants (filled/outlined/subtle).

GraphCanvas

Interactive SVG graph visualization with zoom/pan, layout algorithms, selection, and keyboard shortcuts.

RelationshipManager

Grouped relationship list with 3-step inline add panel, AI suggestion handling, and TypeBadge integration.

HelpDrawer & HelpTooltip

Right-side sliding panel for in-context documentation with ? icon tooltips.

DocViewer

Three-column documentation layout with TOC tree, markdown content, and outline panel.

GuidedTour

Product walkthrough powered by Driver.js with enterprise-themed popovers.

Progress Modal

A modal dialog for displaying progress of long-running operations with indeterminate (spinner) and determinate (progress bar) modes, and a scrollable detail log.

Timezone Picker

A searchable timezone selector with grouped regions, UTC offset display, and live time preview.

CRON Picker

A visual builder for 6-field CRON expressions with presets, field editors, human-readable descriptions, and bidirectional raw expression editing.

Markdown Editor

A Bootstrap 5-themed Markdown editor (Vditor) with tab/side-by-side views, collapsible panes, inline toolbar, Mermaid/Graphviz/PlantUML diagrams, and export.

Status Bar

A fixed-to-bottom viewport status bar with configurable label/value regions. Text is natively selectable for Ctrl+C copying — try selecting the bar at the bottom of this page.

Sidebar Panel

A dockable, floatable, resizable sidebar panel with tab grouping, collapse to icon strip, and drag-to-dock. Try the controls below to create and manipulate sidebars.

Toolbar

A programmable action bar with regions, overflow, split buttons, gallery controls, drag-to-dock, and KeyTips.

Gauge

A visual measure component modeled after the ASN.1 Gauge type. Supports tile, ring, and bar shapes with value and time modes.

Conversation

A turn-by-turn AI chat UI with rich text rendering, streaming responses, session management, feedback, and clipboard copy.

MCP Message Log:

MCP Message Log:

MCP Message Log:

Event Timeline

A horizontal event timeline for visualising point events (pins) and span events (blocks) with row packing, grouping, collapsing, selection, and viewport callbacks.

Banner Bar

A fixed-to-top viewport banner for announcing significant events. Only one banner is visible at a time; showing a new one replaces the previous.

Breadcrumb Navigation

Hierarchical path display with clickable segments, terminal dropdown actions, and overflow truncation for deep hierarchies.

Basic Breadcrumb

With Icons & Terminal Actions

Deep Hierarchy — Overflow Truncation (8 items, maxVisible=5)

Size Variants

Notification Center

In-app notification bell with slide-out panel, category filters, read/unread state, and dismiss.

Bell Trigger

Multi-Stage Stepper (Wizard)

Step progression UI with validation gates, completion tracking, and linear/non-linear navigation.

Linear Stepper

Non-Linear Stepper (vertical)

Property Inspector (Drawer)

Slide-out drawer for viewing/editing entity details with tabbed sections.

Modal

List Group

Tabbed Panel

A dockable, collapsible, resizable tabbed panel with configurable tab bar position, dynamic tab management, and drag-to-dock.

TreeView

A configurable tree view for hierarchical data. Supports lazy loading, multi-select, drag-and-drop, context menu, inline rename, search, starred items, sort, and extensible node types.

TreeGrid

Enterprise tree-grid hybrid with hierarchical data in a columnar layout.

Project Task Tracker

Expandable project hierarchy with editable status, priority, and assignee columns. Try column resize (drag header edges), sort (click headers), inline editing (double-click or F2), multi-select (Ctrl+Click, Shift+Click), drag-and-drop rows, and right-click context menu.

File Browser

File system browser with sortable size and date columns. Single selection, column resize, and keyboard navigation (arrow keys, Home, End).

DockLayout

CSS Grid-based layout coordinator arranging Toolbar, Sidebar, TabbedPanel, StatusBar, and content into a 5-zone application shell. Inspired by Java Swing's BorderLayout.

Full Application Shell

All 5 layout zones populated: toolbar (top), left sidebar with tree view, right sidebar, bottom panel with tabs, status bar, and center content. Try resizing and collapsing sidebars — the center content reflows automatically.

Minimal Layout

Toolbar and content only — empty slots collapse to zero height/width automatically.

Dynamic Slot Management

Add or remove layout slots at runtime using the buttons below.

MaskedEntry

Masked input for sensitive non-password data — API keys, tokens, connection strings. Provides show/hide toggle, copy-to-clipboard, and configurable masking.

SplitLayout

Draggable, resizable split pane container. Supports horizontal/vertical orientation, pane collapsing, nested layouts, divider style variants, and state persistence.

Layout Containers

CSS-driven layout containers — Flexbox, CSS Grid, and absolute positioning. All support nesting and the composability contract.

Toast

Transient non-blocking notifications with stacking, auto-dismiss, and action support. Click buttons to trigger toasts.

MultiselectCombo

Multi-select combo box with chips, checkboxes, filtering, grouping, Select All, and configurable display modes.

DataGrid

High-performance flat data table with sorting, filtering, pagination, inline editing, virtual scrolling, and CSV export.

CodeEditor

Bootstrap-themed code editor with toolbar, syntax highlighting (when CodeMirror 6 is loaded), and textarea fallback.

Tagger

Combined freeform and controlled-vocabulary tag input with autocomplete, colored chips, taxonomy categories, and validation.

FacetSearch

Facet-aware search bar with structured key:value query parsing, inline chips, autocomplete, and recent search history.

FileExplorer

Two-pane file navigation with folder tree sidebar, breadcrumbs, three view modes (grid, list, detail), multi-selection, context menu, inline rename, and sorting.

CommentOverlay

Transparent annotation overlay with pins anchored to DOM elements, threaded comments, @mentions, resolve/unresolve, and drag-to-reposition.

SkeletonLoader

Animated placeholder mimicking content layout during loading. CSS shimmer animation with six presets.

EmptyState

Centered placeholder for empty views — icon, heading, description, CTA button, and secondary link.

ColorPicker

Canvas-based colour selection with saturation/brightness gradient, hue strip, optional opacity slider, hex/RGB/HSL format tabs, and preset swatches.

ReasoningAccordion

Collapsible accordion for displaying AI chain-of-thought reasoning steps with status indicators, shimmer animation, timing, confidence bars, and Vditor markdown rendering.

CommandPalette

Keyboard-first Ctrl+K omnibar for searching and executing registered commands with fuzzy matching, category grouping, recent history, and match highlighting.

PromptTemplateManager

Two-pane CRUD interface for managing prompt templates with variable extraction, preview, tags, categories, and import/export.

WorkspaceSwitcher

Dropdown or modal workspace switcher with trigger button, search, keyboard navigation, and initials avatars.

AuditLogViewer

Read-only filterable audit log with severity badges, expandable detail rows, filter chips, pagination, and export.

PermissionMatrix

Interactive RBAC grid with tri-state checkboxes, role inheritance, bulk operations, search, change tracking, and export.

ActivityFeed

Social-style activity feed with date grouping, avatars, event type icons, and infinite scroll.

GraphToolbar

Factory function that creates a preconfigured Toolbar for graph visualization apps — editing, layout, zoom, export, and search.

LogConsole

Reusable in-app logging console for displaying high-level user actions and system events. Supports level filtering, export, dark/light themes, and full colour/font customisation.

StatusBadge

Colour-coded status indicators with dot, pill, and indicator variants. Animated pulse for live states.

ConfirmDialog

Promise-based confirmation modal with customisable title, message, variant, and buttons. Traps focus and supports Escape/Enter.

Click a button above to open a confirm dialog.

SearchBox

Debounced search input with optional suggestions dropdown, clear button, and keyboard navigation.

UserMenu

Avatar-triggered dropdown menu for user account actions with keyboard navigation and status indicators.

FileUpload

Drag-and-drop upload zone with progress bars, file validation, retry, and optional download section.

AnglePicker

Circular dial input for selecting angles (0-360°). Supports inline and dropdown modes with optional shadow preview.

AppLauncher

Grid-based application launcher with three view modes: dropdown (waffle icon), modal (centered overlay), and fullpage (inline with sidebar).

Dropdown Mode

Click the waffle icon to open a dropdown grid. Search, favourite, and navigate with arrow keys.

Modal Mode

Opens a centered overlay with category tabs, search, and favourites.

Fullpage Mode

Inline layout with sidebar category navigation and responsive grid.

FormDialog

Modal dialog for form-based workflows with single-page and wizard modes, 12 field types, collapsible sections, resizable panel, and built-in validation.

Simple Form (sm)

Basic invite user dialog with email and role fields.

Complex Form with Sections (lg)

Edit user profile with collapsible sections, multi-column layout, and multiple field types.

Form with Panel (xl)

Create role dialog with a resizable help sidebar that updates reactively as you type.

Wizard Mode (xl)

Multi-step workspace creation wizard with step indicator, back/next navigation, and per-step validation.

FontDropdown

Dropdown picker that renders each font name in its own typeface, with search filtering and recently-used tracking.

LineWidthPicker

Visual dropdown for selecting line thickness with CSS border previews.

LineTypePicker

Visual dropdown for selecting line dash patterns with inline SVG previews.

LineShapePicker

Visual dropdown for selecting line routing/shape types with inline SVG previews.

LineEndingPicker

Visual dropdown for selecting line endpoint decorations with SVG marker previews. 12 standard maxGraph types + optional ER notation set.

Ruler

Calibrated ruler component with cursor tracking, multiple units, and canvas rendering.

Slider

Range input with single and dual-thumb modes, tick marks, value labels, and keyboard navigation.

Magnifier

Cursor-following magnifying glass overlay. Hover over the content below to see magnification.

SymbolPicker

Grid-based symbol and icon picker with Unicode characters and Bootstrap Icons, category tabs, search, and preview.

Ribbon

Microsoft Office-style tabbed toolbar with adaptive groups, QAT, menu bar, backstage, KeyTips, and 13 control types.

Rich Text Editor Ribbon

Contextual Tab & Backstage

Pill

Inline pill element for mentions, issues, documents, and tags. Rounded ends are an explicit exception to the zero-radius theme (ADR-034).

Colour Presets

Sizes

With Icons

Dismissible

Clickable with Hover

Custom Styled

Inline in Paragraph

Hey , please review the changes in before we merge. Also CC and link for reference.

RichTextInput

Lightweight contenteditable rich text input — fills the gap between a plain <input> and the full MarkdownEditor. Composes STIE and Pill for per-row editing contexts.

Basic

Formatted Content

With STIE Triggers

Type @ to mention someone or # to reference an issue. Requires STIE loaded above.

Task Lists

Size Variants

Disabled / Readonly

Character Counter

Multiple Instances

getValue / setValue

Smart Text Input Engine

Behavioral middleware that attaches to text inputs for trigger-based inline references. Host provides popover UI; engine provides detection, coordination, and tokens.

Textarea — @mentions and #resources

Type @ or # after a space. Arrow keys navigate, Enter selects, Escape cancels. Try \@ for a literal @.

ContentEditable — token pills

Same triggers. Tokens render as inline pills with atomic backspace deletion.

Static Token Rendering

Serialized text rendered as visual tokens via SmartTextInputEngine.renderTokens().

PersonChip

Compact person-identity chip — avatar (image or initials), name, status dot, and optional detail. Visual style matches UserMenu trigger.

Basic

Name only, name + email (hover for tooltip), name + avatar image.

Initials Fallback

Deterministic coloured circles — same palette as UserMenu.

Status Dots

Online, busy, away, offline indicators.

Size Variants

sm (20px), md (28px), lg (36px) side by side.

Clickable

Click or press Enter/Space to activate. Events logged below.

Share Dialog Mock

Styled "Shared with:" container with multiple chips.

With Roles (lg)

Large size showing email/role detail text inline.

PeoplePicker

Searchable person selector with frequent contacts, async search, PersonChip integration. Single-select and multi-select modes.

Basic Multi-Select

6 frequent contacts, chip overflow badge after 5.

Single-Select

Select replaces input with PersonChip. Click chip or X to clear.

Async Search (Callback)

Type to search with simulated 500ms delay. Spinner shown during load.

Async Search (URL)

URL-based search with mocked fetch. Shows fetch URL pattern in console.

Frequent + Search Combined

Both "Frequent" and "Results" section headers visible. Focus shows frequent, typing searches.

Max Selections (3)

After 3 selections, remaining rows are dimmed.

Disabled & Readonly

Two instances side by side — disabled (left) and readonly (right).

Size Variants

sm, md, lg side by side.

PresenceIndicator

Overlapping avatar stack showing who is actively viewing/editing a resource. Click to expand to full PersonChip list.

Basic

3 people, collapsed, static (no overflow).

Overflow

7 people, maxVisible: 4 — shows "+3" badge.

Expandable

Click the stack to toggle expanded/collapsed. Events logged below.

Size Variants

sm, md, lg side by side.

With Statuses

Online, busy, away dots visible on collapsed avatars.

Programmatic

Add Person, Remove Last, Toggle via buttons.

ShareDialog

Modal share dialog composing PeoplePicker and PersonChip with configurable access levels and diff computation.

Basic Share Dialog

Opens a share dialog with 3 access levels and 2 existing people. Result logged to console.

With Existing Access

Pre-populated with 4 people at various access levels. Change levels and remove to see diff.

Small Size

Compact 400px variant for simple sharing.

Large Size

Wide 750px variant for complex permission management.

Result Log

Click a button above to open a ShareDialog...