Gallery
Browse the categorized component catalog and find the building block you need.
Form Controls
A form control for selecting options using either checkboxes or radio buttons.
A form control wrapper for values, default composition, and date validation.
A form control wrapper for file selection, shared field state, and file validation messages.
A form control for numeric input with validation and optional spin buttons.
A form control that allows users to choose one option from a dropdown list.
A form control for inputting and managing multiple tags or keywords.
A form control for single-line or multi-line text input.
A form control for selecting one or multiple options from a set of toggle buttons.
Inputs
A month-grid date picker with optional month-picking mode and binding.
An input component for selecting colors from a palette or color wheel.
A combination of a text input and dropdown that allows typing to filter options.
- HTML
- CSS
- JavaScript
- TypeScript
A text-like date control with a private popover and binding.
A standalone file picker with optional drag-and-drop, validation limits, and presentational drop-zone content.
A component for capturing and displaying keyboard shortcuts or hotkey combinations.
A year and month picker that coordinates two wheel pickers around a value.
A numeric text input with optional spin buttons and datalist suggestions.
An input where the user selects a value from within a given range.
An input component for adding, removing, and managing multiple tags or labels.
A switch control for binary on/off or true/false states.
A collection of toggle buttons that allows users to select one or multiple options.
A wheel-style single select that keeps native select behavior as the source of truth.
Overlays
A right-click menu container that wraps a .
Display a content that slides in from the side of the screen.
An overlay dialog that appears on top of the main content to focus user attention.
A trigger button and native popover panel for menu-like floating content.
A transient notification region driven imperatively by a .
A small popup that displays helpful information through an attachment on a target element.
Menu & Navigation
A labeled group for related items inside a .
A reusable body for menu items, groups, and separators.
A non-interactive separator between groups of menu items.
A submenu trigger that opens a nested menu list inside a parent menu.
A page navigator that coordinates first, previous, next, last, and page input controls.
A navigation component that organizes content into multiple panels with clickable tabs.
Layout & Display
A container with multiple collapsible sections where only one section can be expanded at a time.
First Item
Second Item
Third Item
A clickable element that triggers an action when pressed.
A switch component for toggling between light and dark themes.
A component that reveals or hides additional content when toggled.
Title
A responsive / wrapper with lazy loading, placeholder, and load/error state styling.

A component that displays the current step in a multi-step process or workflow.
- (1)Step 1
- (2)Step 2
- (3)Step 3
A single list that allows users to reorder items through drag-and-drop interactions.
- Item 1
- Item 2
- Item 3
- Item 4
Connects two or more lists so items can move between them.
Todo
- Scope sortable docs
- Write copy
Doing
- Build examples
Done
- Verify API
A draggable separator that coordinates the size of two panes.
Drag the divider to resize this pane.
The first pane consumes var(--svs-splitter).