DOM Studio
Components
30 components · 23 familiesApplication interface primitives with accessible behavior, polished Vue presentation, and source you can inspect and own.
Explore
Components at a glance
Each card shows the component's core visual or interaction model. Where possible, previews use the real component; overlays and context-dependent controls use contained examples so the catalog stays useful at a glance.
Progressively discloses related sections with single or multiple open-state behavior.
Accessible route or resource-path navigation with application-owned destinations and optional middle-path collapsing.
A keyboard-first command launcher composed from dialog and listbox patterns.
A right-click menu built on DomMenu, with popover top-layer placement and keyboard navigation.
A modal built on the native HTML <dialog> element — top-layer rendering, native stacking, scroll lock, and backdrop styling without z-index hacks.
A menu that opens from a button — fully keyboard accessible, with focus return, optional scroll lock, and outside-click handling.
A compact accessible button for toolbar, row action, and chrome controls.
A gallery overlay that opens from a thumbnail into a stable preview stage, then flies back to the origin on close.
A roving-focus action menu for command lists, settings menus, and static menu panels.
A controlled page navigator for data grids, audit logs, search results, and resource lists.
A floating panel anchored to a trigger. Built on the HTML Popover API so it sits in the top layer — no parent overflow, transform, or z-index can clip it.
A signed-in account trigger with avatar, email, and app profile actions.
A smooth-scrolling table of contents that keeps real fragment links highlighted as their target headings move through a page or scroll container.
A resizable multi-pane shell for editors, inspectors, file browsers, and app-builder workspaces.
Controlled horizontal or vertical progress navigation for multi-step application workflows.
A DOM Studio light, dark, and system theme preference control.
A polite live-region stack for transient notifications.
A compact action surface for icon buttons, segmented controls, filters, and overflow menus.
Adds lightweight accessible context on hover and focus with collision-aware placement.
A keyboard navigable hierarchical tree with selection, custom item rendering, lazy loading, and drag/drop reordering.