Svelte 5 component system
Everything included.
Nothing locked down.
A complete Svelte 5 component system powered by one reactive JavaScript theme. Start with ready-to-use components, then extend, replace, variant, and compose them however you want.
Button
Start with a ready-to-use component.
Loading...Batteries included
Primitives and common components ready from day one.
One global theme
A reactive $state shared across all components.
Just JavaScript
Generate, extend, replace, or share your theme.
Variants built in
Define variants once in your theme.
Styles are composable
Use button styles on a link or any component.
Meet your building blocks
Everyday components.
Anything but ordinary.
Swipe to explore, or use the arrows. These are real components.
A familiar control, with your own style.
A place for your next idea.
One surface. A thousand possibilities.
Stay in the loop.
Can I make it my own?
Change its theme, add variants, or use your own classes.
The bigger picture.
Your changes have been saved.
01 / Global theming
One change.
Every component follows.
Your theme is a shared, reactive source of styles. Update a base style or variant once, and every component using it picks up the change. Across forms, pages, and your entire app.
Roll out a new design without editing every instance.
Keep repeated components consistent as your app grows.
Change geometry and spacing independently of your color palette.
Your workspace
PreviewLoading...02 / Make it yours
Your theme.
A few lines of JavaScript.
Start with a preset, change what matters, and give it a name. A theme is a plain object of component names, base classes, and variants. The Theme API makes extending it just as straightforward.
Clone any of the five included presets.
Merge base classes and define your variants.
Apply it globally or pass it to one component.
Keep your theme in its own file and reuse it across projects. Your components keep the same API as your design evolves.
Build your first themeLoading...Your custom cta variant
03 / Styles without boundaries
A button's style doesn't
have to stay on a button.
Reference another component's base classes or a named variant. A link can look like a button. A div can use your card surface. Keep the right HTML element and share the same design decisions.
Loading...Update the source styles and these references follow automatically. Use Settings to change the site's style or color and see them stay in sync.
Your system, your rules
Start with components.
Build a design system that feels like yours.
One theme to guide your app. Simple tools to shape it. Shared styles that work wherever you need them.