Svelte UI Component Library

Theme & Foundation

Theme Colors

Complete color palette with light/dark theme support

Variants

The shared variant axis across every component + the accent tint

Sizes

The size axis — scalar + responsive per-breakpoint shapes

Form Elements

Button

Flexible button component with variants and icon support

Input

Enhanced text input with validation and icons

Specialized Inputs

Pre-built inputs: Search, Email, Password, Number

Select

Custom dropdown with rich content support

Toggle

Sliding on/off switch — variants, sizes, input-aligned

Checkbox

Tri-state box (checked / indeterminate) — variants, sizes

Date & Time

DatePicker (date / datetime / range) + themed DateTimeInput

List

Standalone scrollable list with API integration

TextArea

Multi-line input with auto-resize and scrollbar

NotesEditor

Auto-sizing textarea for notes and comments

Rating

Interactive star rating component

Data

DataTable

Sortable, filterable, paginated table with selection, row/bulk actions, and expandable rows

Query

Filter bar with a $column op value DSL, autocomplete, and a syntax help dialog

Layout & Overlays

Card

Bordered surface with inset Header / Body / Footer

SideBarMenu

Collapsed icon strip with fly-out labelled popouts

TabStrip

Data-driven horizontal tab strip, one bindable index, route- or state-driven

Dialog

Modal dialog with backdrop and customizable content

Tooltips

Themed use:tooltip action on the anchored engine; Button drives it from title

Alert & Banner

Inline Alert (icon, tint) + solid full-width Banner (icon, dismissible)

Toast

Push status toasts from anywhere (toast.*); one <Toaster /> renders them