sui

simple ui — an opinionated, batteries-included component library for Svelte 5, built on top of shadcn-svelte, bits-ui, Tailwind CSS v4 and zod v4.

sui exists to remove boilerplate. A typical form field needs a label, helper text, icons, validation wiring, error display, a size, and a skeleton for its loading state — that is eight concerns before any business logic. sui collapses them into props:

<!-- everything a production form field needs, in one component -->
<SuiInput
	label="Email"
	placeholder="[email protected]"
	startIcon={MailIcon}
	schema={z.email('Enter a valid email')}
	bind:value={email}
/>

<!-- an async, server-searchable select with infinite scroll -->
<SuiSelect label="Owner" source={cursorSource(fetchOwners)} bind:value={ownerId} />

<!-- or wire the ENTIRE form from one zod schema — values, validation
     timing and error display all automatic -->
<SuiForm {form}>
	<SuiInput field={form.fields.email} label="Email" type="email" required />
	<SuiCheckbox field={form.fields.accept} label="I accept the terms" />
	<SuiButton type="submit">Create account</SuiButton>
</SuiForm>

No separate <Label>, no <FormField>, no validation framework glue, no scroll listener code, no manual safeParse/error mapping.

What's inside

Area	Components & exports
Form controls	SuiInput, SuiTextarea, SuiSelect, SuiCombobox, SuiMultiSelect, SuiCheckbox, SuiRadioGroup, SuiSwitch
Date & time	SuiDatePicker, SuiDateRangePicker, SuiTimePicker, SuiDateTimePicker (+ skeletons, ISO helpers isoToDate, dateToIso, timeSlots, …)
Actions	SuiButton, SuiIconButton
Data	SuiDataTable (+ suiColumn helper, renderComponent), SuiDataTableSkeleton, CSV helpers (suiDownloadCsv, suiRowsToCsv, suiCsvCell)
Error handling	SuiErrorSummary (WCAG 3.3.1 error box), focusFirstInvalid()
Skeletons	SuiInputSkeleton, SuiTextareaSkeleton, SuiSelectSkeleton, SuiComboboxSkeleton, SuiMultiSelectSkeleton, SuiCheckboxSkeleton, SuiRadioGroupSkeleton, SuiSwitchSkeleton, SuiButtonSkeleton, SuiSkeleton
Infinite scroll	SuiSource, offsetSource(), cursorSource(), SuiInfiniteList, observeSentinel()
Mobile	suiMobileQuery() / SUI_MOBILE_QUERY — the breakpoint where the select family switches to bottom sheets
Validation	zod v4 helpers — suiValidate(), SuiFieldState — plus the schema prop on every form control
Schema-driven forms	createSuiForm(), <SuiForm>, form.fields.* handles, form.array() lists, suiParseFormData / suiEnhance for SvelteKit actions (one zod schema wires values, timing, errors, submit parsing)
Localisation	setSuiStrings(), SUI_STRINGS — every built-in string is overridable per subtree (i18n-ready, reactive)
Design tokens	SuiSize scale + semantic variant maps (SUI_CONTROL, SUI_FIELD_CONTROL, …) shared by every component

This is the beginning of the README. Read the rest at the original. Read the full README ↗