Button
Actions, links, loading states, and a little feedback.
Built for Svelte 5 & SvelteKit 3
Components that
work together.
Good defaults. Reactive managers. Room to make it yours. Build your next project with a UI library that fits the way you work.
npm install sveltekit-uiSvelte 5 · SvelteKit 3 · JavaScript
Create a workspace
A little space for your next big idea.
Project type
A live example. Try the controls.
01
State you can follow
Managers keep behavior in one place.
02
A theme that adapts
Shared tokens for light and dark.
03
Made to be combined
Small pieces, useful possibilities.
The building blocks
Start with the essentials.
Explore the live examples, then make them your own.
Text Input
From a simple field to passwords and validation.
Dropdown
Searchable options, multiple selections, and more.
Popover
Give menus and small dialogs a place to live.
Table Advanced
Bring structure to data with sorting and filtering.
Chart
Turn your numbers into something easy to read.
A small first step
From install to your
first component.
Import the shared styles once in your root layout. Create a manager, pass it to the component, and you’re ready to go.
The manager owns state and behavior.
The component takes care of rendering.
<script>
import "sveltekit-ui/style.css"
import { Button, create_button_manager } from "sveltekit-ui"
const save = create_button_manager({
text: "Save changes",
on_click: () => console.log("Saved"),
})
</script>
<Button manager={save} />Starting something new?
The starter sets up a project with SvelteKit UI.
npx create-sveltekit-ui-site my-projectOne system, your style
A good foundation.
Your finishing touches.
Set your brand hue and chroma through shared CSS tokens. Use the adaptive -t colors for surfaces and text, and let Layout handle the theme.
:root {
--primary-h: calc(var(--h14) + 6);
--primary-c: var(--c16);
}
.card {
color: var(--g4-t);
background: var(--bg2);
}Keep exploring
See how it all fits.
Watch the overview for a closer look at the library and its manager pattern.
The reference, ready to go.
54 component definitions and examples in one copyable reference.