sui — Opinionated Svelte 5 UI toolkit

Welcome to the Svelte UI toolkit! This is a collection of components and utilities designed to help you build Svelte applications quickly and efficiently.

Component Library

Button, Frameless Button, & Link

Click Me Visit Svelte

Button Select

console.log('Chosen:', value) }} options={[ { title: 'Action 1', onchoose: (value) => console.log('Action 1 chosen:', value) }, { title: 'Action 2', onchoose: (value) => console.log('Action 2 chosen:', value) } ]} />

Combobox

console.log('Selected:', e.value)} onvalidate={(e) => console.log('Validation:', e.detail)} />

Checkbox

console.log('Checkbox value:', value)} > Agree to terms and conditions Checkbox is {checkboxValue}

Dateinput

Selected date is {dateInputValue}

Phone Input

Pin Input

Radio Group

Styled Raw Input, Text Input

Time Input

TimezoneInput

Toggle Group

Toggle Select

Toggle Me!
{ dialogOpen = false; alert('Dialog submitted!'); }} >

This is a dialog content area.