Welcome to Svelte Atoms
A modern, composable component library for Svelte 5 built on atomic design principles with powerful theming and state management.
Quick Links
Core Features
Everything you need to build modern web applications
Atomic Design
Build UIs from the ground up with composable atomic components that work seamlessly together.
Bond System
Powerful state management and component communication through intelligent bonds.
Preset System
Global theming with hierarchical composition, variants, and reactive state support.
Type-Safe
Full TypeScript support with comprehensive type definitions and intelligent inference.
Accessible
Built with accessibility in mind, following WAI-ARIA guidelines and best practices.
Svelte 5 Runes
Leverages the latest Svelte 5 features with $state, $derived, and $effect.
Getting Started
Jump right in and start building
1. Install the package
npm install @svelte-atoms/core2. Import the stylesheet
Import the internal stylesheet in your root layout to include base styles:
// +layout.svelte or app entry point
import '@svelte-atoms/core/tw';3. Configure Tailwind CSS
For Tailwind CSS v3:
// tailwind.config.js
export default {
content: [
'./src/**/*.{html,js,svelte,ts}',
'./node_modules/@svelte-atoms/core/dist/**/*.{js,svelte}'
],
// ... rest of config
};For Tailwind CSS v4:
/* app.css or main stylesheet */
@import 'tailwindcss';
@source './node_modules/@svelte-atoms/core/dist/**/*.{js,svelte}';This ensures Tailwind includes all CSS utility classes used by the components.
4. Import and use components
<script>
import { Button } from '@svelte-atoms/core/button';
</script>
<Button>Click me</Button>5. Customize with presets (optional)
import { setPreset } from '@svelte-atoms/core/context';
setPreset({
button: () => ({
class: 'rounded-lg px-4 py-2',
variants: {
variant: {
primary: { class: 'bg-blue-500 text-white' }
}
}
})
});Why Svelte Atoms?
🎯 Built for Svelte 5
Designed from the ground up for Svelte 5's new paradigm with runes, snippets, and the latest features.
🧩 Truly Composable
Atomic design meets component composition. Build complex UIs from simple, reusable pieces.
🎨 Powerful Theming
Hierarchical preset system with deep merging, variants, and reactive state-based styling.
⚡ Performance First
Optimized with memoization, early exits, and Svelte's reactive system for minimal overhead.
♿ Accessible by Default
ARIA attributes, keyboard navigation, and screen reader support built into every component.
🛠️ Developer Experience
Full TypeScript support, comprehensive docs, and intuitive APIs that make development a joy.
Next Steps
Ready to dive deeper?
Explore our comprehensive documentation to learn about atoms, bonds, styling, and more.