Skip to main content

​
Welcome to Svelte Atoms Core

A modern, modular, and accessible Svelte 5 UI component library built with composability at its core. Build beautiful, accessible user interfaces with the power of Svelte 5 runes and a flexible component architecture.

​
Why Svelte Atoms Core?

Svelte Atoms Core is designed from the ground up to provide maximum flexibility while maintaining accessibility and type safety. Whether you’re building a simple form or a complex data grid, our components adapt to your needs.

Get Started

Install Svelte Atoms Core and set up your first project in minutes

Quick Start

Build your first component with a complete working example

Components

Explore our comprehensive collection of UI components

API Reference

Deep dive into component APIs and advanced usage patterns

​
Key Features

Bond Architecture

Self-contained state management with context-based communication enables complex component interactions while maintaining clean APIs

Accessible by Default

ARIA attributes, keyboard navigation, and focus management are built into every component out of the box

Type Safe

Full TypeScript support with comprehensive type definitions ensures you catch errors at compile time

Headless Design

Complete styling control with sensible defaults - bring your own CSS or use our presets

Composable

Build complex UIs by combining simple, reusable components with the base and as props

Svelte 5 Runes

Leverages Svelte 5’s optimized reactivity system for peak performance and clean component code

​
What Makes It Different?

​
Flexible Composition

Use the base prop to transform any component into another, enabling powerful composition patterns: 
<!-- Use Button as Popover trigger -->
<Popover.Trigger base={Button} variant="outline">
  Open Settings
</Popover.Trigger>

<!-- Use Input as Dropdown trigger -->
<Dropdown.Trigger base={Input.Root}>
  <Input.Control placeholder="Select option..." />
</Dropdown.Trigger>

​
Built for Svelte 5

Take advantage of Svelte 5’s powerful runes for reactive, performant components: 
<script lang="ts">
  import { Button, Dialog } from '@svelte-atoms/core';
  
  let dialogOpen = $state(false);
  let inputValue = $state('');
</script>

<Button onclick={() => (dialogOpen = true)}>Open Dialog</Button>

<Dialog.Root bind:open={dialogOpen}>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>Welcome</Dialog.Title>
    </Dialog.Header>
    <Dialog.Body>
      <p>This dialog uses Svelte 5 runes for reactive state management.</p>
    </Dialog.Body>
  </Dialog.Content>
</Dialog.Root>

​
Seamless Animation Support

Integrate with Svelte’s animation system or use Motion for advanced transitions: 
<script lang="ts">
  import { List, Button } from '@svelte-atoms/core';
  import { flip } from 'svelte/animate';
  
  let items = $state([
    { id: 1, text: 'Task 1' },
    { id: 2, text: 'Task 2' },
    { id: 3, text: 'Task 3' }
  ]);
</script>

<List.Root>
  {#each items as item (item.id)}
    <div animate:flip={{ duration: 300 }}>
      <List.Item>{item.text}</List.Item>
    </div>
  {/each}
</List.Root>

​
Community and Support

Documentation

Complete guides, API references, and examples

Storybook

Interactive component playground and live examples

GitHub

View source code, report issues, and contribute

npm

View package details and version history

​
Ready to Get Started?

Installation Guide

Follow our installation guide to add Svelte Atoms Core to your project

Build docs developers (and LLMs) love

Get started for freeTalk to us