sui console.log('Cookies accepted!')} ondecline={() => console.log('Cookies declined!')} open > We use cookies and similar technologies to enhance your experience, analyze site traffic, and measure our ads. You can manage your preferences anytime.

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

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)} pickerWidth="longest" > {#snippet labelRender(opt: ComboboxOption)} Processed {opt.label} {/snippet} {#snippet infotextRender(opt: ComboboxOption)} Processed {opt.infotext} {/snippet} console.log('Selected:', e.value)} onvalidate={(e) => console.log('Validation:', e.detail)} /> { await new Promise((resolve) => setTimeout(resolve, 2500)); lazyOptions = [ { value: 'option1', label: 'Option 1' }, { value: 'option2', label: 'Option 2' }, { value: 'option3', label: 'Option 3' } ]; }} onopenchange={(open) => { if (!open) lazyOptions = []; }} />

Checkbox

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

Dateinput

Selected date is {dateInputValue}

Phone Input

{#if PhoneInput.loading}
Loading...
{:else if PhoneInput.error}
Failed to load component
{:else} {/if}

Pin Input

Radio Group

Styled Raw Input, Text Input, Disabled Input, Compact Input

Multi-line input (textarea)

Time & Duration Input

Selected time is {formatTime(timeValue, 'undefined')} ({timeValue?.toString()})

Precise duration is {formatDuration(durationValue)}

TimezoneInput

{#if TimezoneInput.loading}
Loading...
{:else if TimezoneInput.error}
Failed to load component
{:else} {/if}

Toggle

Toggle Me!

Toolbar

Bold is enabled: {$boldStore}

Tabs

{#snippet tab1()}

Dashboard Overview

Total Users

1,247

Revenue

$12,450

{/snippet} {#snippet tab2()}

Recent Activity

{/snippet} {#snippet tab3()}

Settings

{/snippet}

Link (with href rewriting)

href rewriting allows you to prepend a basepath to relative links, making it easier to manage URLs in your application. It is recommended to wrap this element with your own, e.g. AppLink, that automatically provides the basepath from your app's configuration.

Go to About Page (with basepath) External Svelte Site Contact Us (relative link, no basepath)
{ dialog.close(); alert('Dialog submitted!'); } }, cancel: null }} onopen={(dialog) => { dialog.error('Example error message!'); dialog.loading(); setTimeout(() => { dialog.loaded(); }, 2000); }} >

This is a dialog content area.

Ullamco nulla sunt laboris esse commodo irure id pariatur est irure eiusmod. Cupidatat Lorem ad deserunt non culpa aliqua qui qui ut reprehenderit minim consequat amet. Qui elit ipsum dolor enim laboris. Exercitation sint esse dolore enim irure veniam esse incididunt fugiat.

In elit tempor quis enim id fugiat cillum consectetur minim sint ex. Minim reprehenderit culpa sunt in reprehenderit. Amet in minim in nulla officia fugiat laborum velit dolor laborum deserunt aliqua nostrud.

Ad dolor ad nisi est fugiat anim aute amet. Fugiat excepteur proident incididunt anim sunt. Proident quis dolor ea voluptate esse commodo voluptate quis culpa cupidatat excepteur.

Cillum ut laboris laboris ea ex ex. Aliquip magna irure eiusmod qui eiusmod. Mollit id et incididunt sint mollit anim cillum reprehenderit exercitation labore incididunt culpa. Officia et ad occaecat quis ipsum. Culpa quis cupidatat reprehenderit reprehenderit incididunt excepteur quis minim. Laboris cupidatat laborum est ipsum esse sint aliqua cillum laborum est cillum dolore cupidatat pariatur. Dolor ipsum cillum enim esse consectetur dolor sunt magna.

Eu cillum reprehenderit Lorem duis sunt. Mollit laborum tempor magna dolor ad ipsum do fugiat nisi quis culpa tempor veniam officia. Voluptate irure labore aliqua elit officia nulla dolor. Lorem duis ea ea commodo deserunt minim enim. Excepteur non magna cupidatat ea eiusmod dolore elit dolor veniam cupidatat. Amet voluptate culpa ut ex consequat culpa cillum. Exercitation ex voluptate incididunt laboris qui sint id quis in aliqua excepteur incididunt.