Atoms
The primitive layer.
The fundamental building blocks of Svelte Atoms - primitive components that power everything.
What are Atoms?
The fundamental components that power every higher-level piece in the library.
In chemistry, atoms are the basic units that combine to form molecules. In Svelte Atoms, the same principle applies: atoms are the fundamental components that combine to create more complex UI patterns.
Unlike traditional component libraries that provide fully-featured components, atoms give you the raw building blocks. They handle the hard parts (accessibility, keyboard navigation, state management) while giving you complete control over structure and styling.
Core concepts
Three ideas that make atoms different from a typical component library.
Primitive Components
Atoms are unstyled by default. They provide behavior, accessibility, and state management without imposing design decisions. You add the styling.
Render Props Pattern
Many atoms use render props (snippet slots in Svelte 5) to give you full control over rendering. The atom handles logic, you handle markup.
Composition Over Configuration
Instead of dozens of props for every possible use case, atoms compose together. Build what you need from simple pieces.
Anatomy of an Atom
A simple example showing the key props and patterns.
Polymorphic
The `as` prop lets you render any HTML element
Type-safe
Full TypeScript support with proper types for the rendered element
Flexible
Accepts all standard HTML attributes for the element type
When to use Atoms
Atoms shine when you need full control. Here's when to reach for them.
Building Custom Components
Use atoms as the foundation for your own component library. Atoms provide powerful features that make building custom components easier:
- · Preset configuration for consistent styling across your app
- · Animation lifecycles for smooth transitions and effects
- · Base/as props for polymorphic rendering and flexible composition
Need Full Control
When pre-built components are too opinionated, atoms give you the power to build exactly what you need.
Prototyping Rapidly
Quickly compose interfaces without fighting with pre-built component constraints.
Atoms vs full components
Understanding the tradeoff helps you choose the right tool.
Atoms
- + Maximum flexibility
- + Preset configuration system
- + Animation lifecycles built-in
- + Polymorphic (base/as props)
- + Minimal bundle size
- + No styling constraints
- − More setup required
Full Components
- + Ready to use
- + Pre-styled
- + Common patterns built-in
- − Less flexible
- − Larger bundle
- − Fixed styling approach
Next steps
Ready to go deeper?