Your design system,
your rules.
A headless Svelte 5 component library. No hardcoded styles. You own every pixel via the Preset system — globally configurable, locally overridable.
Architecture
Three layers. Total control.
Svelte Atoms is built around three composable primitives that work together to give you complete control over behaviour, state, and style — without coupling them together.
Atoms
The lowest-level building block. HtmlAtom wraps any HTML element and injects preset classes, variants, and bond state — with zero
hardcoded styles.
Bond
Shared reactive state between a component's parts. No prop drilling — child components read their parent's bond from Svelte context. State flows down automatically.
Learn morePreset
A global style configuration for your entire app. Define variants, defaults, and classes per component slot once — override locally per instance. Your design system lives here.
Learn moreComponents
Everything you need.
30+ accessible components. Each one is headless — style it once in your preset, use it everywhere.
Quick start
Up in minutes.
Install the package, configure your preset, and start composing.
One package. No peer dependencies, no CSS framework required.
Ready to build?
Start with the quick-start guide or explore the component library. Everything is open source.