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
alert('Button clicked!')}>Click Me
alert('Button clicked!')}
>Loading Button
Click Me
(dialogOpen = true)}>Open Dialog
Button Select
console.log('Chosen:', value) }}
options={[
{ label: 'Action 1', onchoose: (value) => console.log('Action 1 chosen:', value) },
{ label: 'Action 2', onchoose: (value) => console.log('Action 2 chosen:', value) },
{
label: 'Disabled Action',
disabled: true,
onchoose: (value) => console.log('Disabled action 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}
(checkboxValue = 'indeterminate')}>Set Indeterminate
Dateinput
{
dateInputValue = new Date();
console.log('Dateinput value set to:', dateInputValue);
}}
>
Set Current Date
Selected date is {dateInputValue}
Styled Raw Input, Text Input, Disabled Input
{
dialogOpen = false;
alert('Dialog submitted!');
}}
>
This is a dialog content area.