Component Gallery
All available ShadowComponent components, organized by category. Live demos coming soon.
Layout
Structural components that define page regions and content organization.
web shadow-header
Application header bar with flexible slot-based layout, configurable background, backdrop blur, and responsive height via CSS custom properties.
menu shadow-nav
Side navigation panel with configurable width, background color, and backdrop filter. Designed to sit alongside the main content area.
article shadow-content
Content container that provides consistent typography styling for headings, paragraphs, links, lists, code blocks, and blockquotes via ::slotted().
open_in_new shadow-window
Draggable, resizable window component with title bar, minimize/maximize/close controls, and snap-to-edge behavior. Base for tool windows.
Input & Forms
Components for user input, selection, and data entry.
tune settings-input
A settings row with label and input control. Supports toggle switches, text inputs, and select dropdowns with built-in styling.
folder_managed settings-group
Groups multiple settings-input components under a section heading. Provides visual grouping with consistent spacing.
settings settings-window
A window containing settings-group components. Combines shadow-window with settings layout for preference panels.
palette color-picker
Canvas-based HSV color picker with saturation/value gradient, hue spectrum strip, and Hex/RGB/HSL/OKLCH input fields. High-DPI canvas rendering.
list styled-select
Custom dropdown select with search filtering, keyboard navigation, and full Shadow DOM styling. Replaces the native <select> element.
Utilities
General-purpose components for common UI patterns.
notifications shadow-toast
Toast notification system with success, error, warning, and info types. Exposes a global showToast() function. Auto-dismisses after 3 seconds.
progress_activity loading-indicator
Animated SVG spinner with customizable text via the default slot. Uses CSS custom properties for accent color.
help help-icon
An inline help icon with a tooltip that appears on hover. Supports configurable positioning and reads tooltip content from a slot.
add_circle shadow-fab
Floating action button with draggable positioning, expandable action menu, and snap-to-edge behavior. Fixed position with high z-index.
Productivity Tools
Full application components built with ShadowComponent, typically displayed in shadow-window containers.
calculate shadow-calculator
A functional calculator with display, number pad, and basic arithmetic operations. Rendered entirely in Shadow DOM.
data_object json-formatter-window
JSON input, validation, formatting, and minification tool. Syntax-highlighted output with copy functionality.
regex regex-tester-window
Regular expression testing tool with pattern input, test string, match highlighting, and capture group display.
terminal js-console
In-browser JavaScript console with command input, output display, command history, and evaluation. Useful for debugging and experimentation.
view_kanban kanban-panel-window
Kanban board with draggable cards across columns. Supports card creation, column management, and drag-and-drop reordering.
monitoring performance-dashboard
Real-time performance monitoring dashboard displaying memory usage, timing metrics, and system statistics with live-updating charts.
lock pgp-toolkit
PGP encryption toolkit with key generation, message encryption/decryption, and signing capabilities. Full cryptographic workflow in the browser.
Content & UI Patterns
Components for displaying content and common UI elements.
link link-card
A clickable card with image, title, description, and link. Glassmorphism styling with hover effects and responsive image handling.
view_list shadow-sublist
Nested list component for hierarchical data display. Supports collapsible sections and recursive nesting.
table shadow-table
A minimal table wrapper component for consistent table styling within Shadow DOM.
draft shadow-form
Experimental form component for generating labeled input fields from observable properties. (Work in progress.)
Interactive demos for each component are coming soon. In the meantime, component source files are self-documenting — each .html file contains the template, styles, and script in one place.
Component Count
| Category | Count | Components |
|---|---|---|
| Layout | 4 | shadow-header, shadow-nav, shadow-content, shadow-window |
| Input & Forms | 5 | settings-input, settings-group, settings-window, color-picker, styled-select |
| Utilities | 4 | shadow-toast, loading-indicator, help-icon, shadow-fab |
| Productivity | 7 | shadow-calculator, json-formatter-window, regex-tester-window, js-console, kanban-panel-window, performance-dashboard, pgp-toolkit |
| Content & UI | 4 | link-card, shadow-sublist, shadow-table, shadow-form |