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
Action 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)}
/>
console.log('Selected:', e.value)}
onvalidate={(e) => console.log('Validation:', e.detail)}
/>
{
setTimeout(() => {
lazyOptions = [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' }
];
}, 2500);
}}
/>
Checkbox
console.log('Checkbox value:', value)}
>
Agree to terms and conditions
Checkbox is {checkboxValue}
(checkboxValue = 'indeterminate')}>Set Indeterminate
Dateinput
{
dateInputValue = today(getLocalTimeZone());
console.log('Dateinput value set to:', dateInputValue);
}}
>
Set Current Date
Selected date is {dateInputValue}
Styled Raw Input, Text Input, Disabled Input, Compact Input
Toggle
Toggle Me!
{
toggleOptions.push({ value: 'new', label: 'New Option' });
}}>Add Option
Toolbar
Bold is enabled: {$boldStore}
Tabs
{#snippet tab1()}
Dashboard Overview
{/snippet}
{#snippet tab2()}
Recent Activity
User John Doe logged in
New order #1234 received
System backup completed
{/snippet}
{#snippet tab3()}
Settings
{/snippet}
{
dialogOpen = false;
alert('Dialog submitted!');
}}
>
This is a dialog content area.