Built with Svelte 5

Build Without
Compromise

A modern component library for Svelte 5. Accessible, composable, extensible, and fully customizable. Built with Runes and the Bond architecture.

Fully Typed
Accessible
Headless
Composable

Svelte 5 Native

Built from the ground up using Runes for fine-grained reactivity and optimal performance.

Learn about Runes

Bond Architecture

Self-contained state management that enables seamless parent-child communication without prop drilling.

Explore Bonds

Accessibility First

WAI-ARIA compliant with built-in keyboard navigation and focus management out of the box.

Accessibility Guide

Headless & Stylable

Unstyled by default. Full control over the look and feel using Tailwind CSS or your preferred styling solution.

Styling Guide

Get Started

Start building your design system today. Install the core package and start composing your atoms.

Install Package

npm install @svelte-atoms/core

Browse Components

Explore our collection of accessible components.

View Component Library

Configure Setup

Follow these steps to configure your project:

  1. 1. Import internal style file in your app
  2. 2. Setup app.css for Tailwind overrides
  3. 3. Configure the preset of your application the a global +layout.svelte
Setup Guide

Popular Components

Explore our most used components. Each one is fully customizable and accessible.

Button

View docs →

Card

Card Title

A container for grouping related content.

View docs →

Badge

Primary Secondary Outline
View docs →

Alert

View docs →

Dropdown

View docs →

Tooltip

View docs →

Popover

View docs →

Dialog

View docs →

Drawer

View docs →

Sidebar

Content
View docs →