Documentation

Everything you need.

From installation to advanced architecture — all the docs for building with Svelte Atoms.

Core concepts

Three composable primitives that give you complete control over behaviour, state, and style

HtmlAtom wraps any HTML element with preset classes, variants, and bond state — zero hardcoded styles, infinite flexibility.

Shared reactive state flows through component trees via Svelte context — no prop drilling, no store boilerplate.

One setPreset() call defines your entire design system. Override globally or per-instance without specificity battles.

Full type inference for variants, slots, and bond state. Catch mistakes at author time, not at runtime.

Keyboard navigation, focus management, and ARIA roles are built into every component by default — not bolted on.

Purpose-built for $state, $derived, and $effect. Embraces Svelte 5's reactive model rather than working around it.

Up and running in three steps

Install the package

Import styles in your layout

Import and use components

Next steps

Learn the architecture, master the styling system, and understand what makes Svelte Atoms different from other component libraries.