Custom Controls Showcase
A collection of advanced, accessible, and reusable UI controls built from scratch as Web Components with the Shadow DOM.
<custom-slider>
A fully custom slider built from basic elements, dispatching events to communicate its value.
<split-view>
A container with a draggable handle to resize two adjacent panels. Supports min/max sizes and keyboard navigation. Cannot be moved offscreen.
<radial-menu>
An accessible radial menu that arranges slotted items in a circle. Focus is trapped when open.
<radial-range-picker>
A circular control for selecting a start/end value. Features snapping, constrained ranges, and custom start positions.
Default
Min/Max Range (0-180)
Notch Snapping
Combined
<sortable-list>
Reorder via drag-and-drop or keyboard.
Keyboard: Tab to an item, `Space` or `Enter` to lift. `Arrows` to move. `Space`/`Enter`/`Esc` to drop.