Philosophy
Build less. Control more.
Svelte Atoms is built on one idea: components should be headless by nature, composable by design, and owned entirely by the developer who uses them.
Three composable primitives
Every component in the library is an expression of the same three-layer model.
01 — Atom
A thin wrapper around any HTML element that injects preset classes and bond state. Zero hardcoded styles — infinite flexibility.
02 — Bond
Self-contained reactive state shared through Svelte context. No prop drilling, no global stores — state lives exactly where it's needed.
03 — Preset
One setPreset() call defines your entire design system. Override globally or per-instance without specificity battles.
The Bond pattern
Bonds are how Svelte Atoms moves state between components without coupling them.
A Bond is a class that holds the reactive state and behavior of a compound component. The root
component creates its Bond internally, calls .share() to
place it in Svelte context, and every descendant retrieves it automatically via getContext — no props passed between them.
Encapsulation
State is local to the component tree that needs it — no accidental global leakage.
Context-driven
The root puts the Bond into Svelte context; any descendant retrieves it automatically — no matter how deep in the tree.
Type safety
Full TypeScript inference — your IDE knows every method and property at authoring time.
Built for Svelte 5 Runes
Runes make Bonds possible. The library embraces them rather than working around them.
$state Fine-grained reactivity
Reactive state that works outside components — not just inside them. This is what makes Bonds a standalone primitive rather than a framework hack.
$derived Automatic computation
Computed values that update when their dependencies change — no manual tracking, no stale closures, no subscription cleanup.
$effect Declarative side effects
Side effects that re-run when dependencies change. Used for DOM sync, focus management, and external state — never for derived data.
What we optimize for
The four qualities we measure every decision against.
Developer experience
Clear APIs, full TypeScript inference, and documentation that answers before you have to ask.
Performance
Minimal bundle footprint. Svelte's compiler does the heavy lifting — we don't add runtime overhead on top.
User experience
Smooth interactions, proper focus management, and accessible behavior out of the box — not bolted on.
Extensibility
Fork a component, override a bond, bypass the preset. We give you the floor, not the ceiling.
What we're not
Setting the right expectations from the start.
Not a CSS framework
Tailwind is the default but not a constraint. Bring your own styling if you prefer CSS modules, plain CSS, or something else.
Not a global state manager
Bonds handle component-level state. For app-wide state — server data, auth, routing — use whatever fits your stack.
Not a finished design system
The Preset system is the foundation. The design language — colors, spacing, motion — is entirely yours to define.