Quick Start

Up and running in minutes.

Install, configure, and ship your first component — this guide covers everything from package installation to a working preset.

Requirements

Make sure your project meets these prerequisites before installing.

Svelte 5

Runes API required

Tailwind CSS v4

CSS-first config

Node.js 18+

Modern runtime

Install @svelte-atoms/core with your preferred package manager.

$ npm install @svelte-atoms/core

Three quick steps to wire up styles, Tailwind, and component defaults.

Import internal styles

Add the style import to your root layout so base component styles load on every page.

src/routes/+layout.svelte

Order matters

Import component styles before app.css to ensure correct cascade order.

Set up Tailwind CSS

Add the Tailwind import and CSS design tokens to your app.css. These variables power light/dark theming.

src/app.css

Source scanning

Include node_modules/@svelte-atoms/core/**/* in your Tailwind source so library utility classes are detected.

Configure the component preset

Define your design system once — variants, default classes, and slot overrides — with a single setPreset() call.

src/preset.ts

With everything configured, import and render a Button.

src/routes/+page.svelte

You're ready

Components are fully styled and keyboard-accessible out of the box. No additional setup required.

Go deeper with components, architecture, and styling.

Browse Components

Explore the full library of accessible, composable components.

Learn the Philosophy

Understand the Atom → Bond → Preset architecture.

Styling Guide

Own every pixel via the Preset system and CSS variables.

Accessibility

Built-in keyboard navigation, ARIA roles, and focus management.

Need help?

Check the GitHub repository for examples, open issues, and discussions.