Components

silver-ui ships 79 components. Every page shows live examples with copyable code and the complete props API, generated from the source.

Layout & Structure

Accordion — Collapsible content sections
AppShell — Application-level layout shell with top navigation, side navigation, banner, skip-to-content support, and responsive mobile navigation
AspectRatio — Maintains a fixed width-to-height ratio for media or embedded content
Card — Rounded container surface for grouping related content
Center — Centers content horizontally, vertically, or both
Divider — Visual separator for grouping content
Layout — Shell with header, side panels, content, and footer slots
HStack & VStack — Horizontal and vertical flex containers with gap

Blockquote — Styled block quotation with an optional citation footer
CodeBlock — Read-only source code display
Kbd — Displays keyboard shortcuts as styled key badges
Text & Heading — Renders styled text with optional truncation, tooltip, and typographic presets

Breadcrumbs — Navigation landmark that displays a trail of breadcrumb links
Link — A polymorphic link component with built-in accessibility, external link handling, and router integration via LinkProvider
NavIcon — Circular icon container for navigation headers
Pagination — Page navigation controls with multiple display variants (numbered pages, count summary, compact label, or none)
SideNav — Vertical side navigation panel with optional collapsing support
Stepper — Displays progress through a sequence of logical steps
Tabs — Controlled tab wrapper
TopNav — Horizontal top navigation bar with heading, start, center, and end content slots

Button — Versatile action element supporting links, loading states, and icon-only mode
ButtonGroup — Groups related Buttons and propagates shared size, disabled state, and orientation to child Buttons
ContextMenu — Right-click (or touch long-press) context menu for contextual actions on a region
DropdownMenu — Button-triggered menu for grouped actions
SegmentedControl — Segmented toggle control for selecting one option from a small set
SplitButton — A directly-clickable primary action paired with an attached chevron toggle that opens a menu of related actions
ToggleButton — Button that toggles between selected and unselected states

AutocompleteInput — Search-as-you-type field for selecting a single item from a search source
CheckboxGroup — A controlled checkbox group for multi-value selection
CheckboxInput — A checkbox input with label, description, and validation support
ColorSwatchPicker — A controlled swatch picker for choosing one named theme color
Field — A form field wrapper that renders a label, description, control slot, and validation status
FileInput — A file input supporting both inline and drag-and-drop dropzone modes
InputGroup — Groups multiple inputs into a single visually connected row
MultiSelect — Multi-select dropdown field with checkbox-style options
NumberInput — Numeric input field with optional min/max bounds and step control
PasswordInput — Password input with a toggle to show or hide the entered value
RadioGroup — A controlled radio group for single-value selection
Rating — Star-based rating control supporting read-only and interactive modes
SearchFilterInput — Structured search control where each tag represents a field/operator/value filter
Select — Single-select dropdown field
Slider — Slider control for selecting a single value or a range
Switch — A controlled switch for boolean settings
TagsInput — Multi-select combobox that renders selected values as removable tags
TextArea — Multi-line text input field with optional character counter
TextInput — Single-line text input field

Calendar — A date picker calendar supporting single date and date range selection
DateInput — A date picker input that combines a text input with a calendar popover
DateRangeInput — A date range picker input that opens a calendar popover for selecting a start and end date
DateTimeInput — A combined date and time input with calendar popover and time fields
Schedule — Read-only schedule shell for day, week, month, and list views
TimeInput — Time picker input field with optional seconds granularity
Timestamp — Displays a single moment in time as a semantic <time> element, either relative to now (“2 hours ago”) or as an absolute date/time

Avatar — Displays a user profile image, initials, or a fallback icon
AvatarGroup — Displays a stacked group of Avatars with shared size and overlap
Badge — A compact status label, category marker, or count
Icon — Renders a lucide icon with Silver UI size and color tokens
Item — Shared start content, label, description, and end content row primitive
List — Semantic vertical list container with optional dividers, markers, and header
MetadataList — Displays a list of label-value metadata pairs in configurable layouts
Table — Data table with sorting, filtering, and column resize plugins
Tag — Compact chip for displaying selected values, filters, tags, or removable entities
Thumbnail — Square image preview for attachments and media
TreeView — Renders a hierarchical tree of expandable and selectable items

Alert — Displays a contextual message with status-based styling, an optional collapsible body, and dismiss functionality
EmptyState — A placeholder for an empty data or content area
Progress — A progress bar that communicates determinate or indeterminate loading state
Skeleton — A pulsing placeholder used while content is loading
Spinner — A compact loading indicator for pending or indeterminate work
Toast — An individual toast notification

AlertDialog — A modal confirmation dialog for destructive or irreversible actions
Dialog — A modal dialog surface with backdrop, focus management, and configurable dismiss behavior
Drawer — A slide-in panel anchored to an edge of the viewport
HoverCard — A floating card that appears on hover or focus of a trigger element
Lightbox — Fullscreen dialog for viewing image or video media, with optional gallery navigation
Popover — A click-triggered floating dialog anchored to a trigger element
Tooltip — Displays contextual information in a popup anchored to a trigger element

Theme — Scoped Silver UI theme provider backed by CSS custom properties
VisuallyHidden — Renders content that is available to assistive technology but hidden from view