Custom Svelte UI Library
A complete desktop-grade component library built for the Planogram Editor — 35 hand-rolled Svelte 5 components with full light/dark theming.
About
Built from scratch to power the Planogram Editor, this library covers everything a complex desktop-grade browser app needs. Every component is written in Svelte 5 with runes, fully typed in TypeScript, and uses Lucide icons throughout.
The design system supports light and dark themes via CSS custom properties, with VS Code-style density (24/28/32px control heights). Components use portal rendering to escape stacking contexts where needed — selects, menus, dialogs and toolbars all render at the body level.
Live component showcase
All components below are fully interactive — rendered live using the actual library code.
Button
Four variants × three sizes, optional icon, loading state.
SegmentedControl
Mutually exclusive option strip. Icon-only, text-only, or mixed.
TabControl
Animated sliding indicator. Horizontal and vertical layouts.
TextInput
Label, prefix icon, prefix/suffix text, error and warning states.
NumberInput
+/− step buttons, min/max clamping, decimal precision.
Select
Custom dropdown with smart viewport positioning and keyboard navigation. Renders via portal to escape stacking contexts — interactive in the full app.
Portal component — rendered at document body in the Planogram Editor
SearchInput & PasswordInput
Search with clear button. Password with reveal toggle.
TextArea
Fixed height, no resize handle. Lines or px height.
MenuBar
Horizontal menu bar chrome. In the full app, Menu components add portal-rendered dropdown panels with submenus, keyboard navigation, and hot-tracking.
Menu dropdowns are portal components — rendered live in the Planogram Editor
Toolbar
ToolbarSection groups, ToolbarButton with toggle state, ToolbarLabel, separators.
Dialog & ConfirmationDialog
Draggable, resizable, collapsible floating windows with glassmorphism chrome. Variant crown colours (default/danger/warning/success), Z-order stacking, and optional localStorage position persistence.
Portal component — rendered at document body in the Planogram Editor
QuickPanel
Floating action card grid — panels, tool pickers, mode switchers.
Features
35 Components
Inputs, selects, buttons, segmented controls, tab strips, dialogs, menus, toolbars, dock zones, and panel resize grips.
Draggable & Resizable Dialogs
Glassmorphism dialogs with drag, resize, collapse, maximize, Z-order stacking, and optional localStorage position persistence.
Cascading Menu System
MenuBar, Menu, MenuItem with submenus, MenuSeparator, and ContextMenu — all with smart viewport positioning and submenu hover timing.
Dock System
DockableDialog panels float freely or snap into left/right DockZone columns with live drag-to-dock and smooth pointer-capture tear-off.
Three Toolbar Variants
Static in-flow Toolbar, FloatingToolbar fixed at screen coords, and AttachedToolbar anchored to 3D scene entities.
Light & Dark Themes
Full CSS custom property theming for both modes. VS Code-style density with 24/28/32px control heights across all components.