@svelte-atoms/core

A modern, headless, and accessible Svelte 5 UI component library built for composability and extensibility.

Why Svelte Atoms?

• 🎯 Headless First - Complete styling control with sensible defaults
• 🔗 Bond Architecture - Self-contained state management with context-based communication
• ♿ Accessible - ARIA attributes, keyboard navigation, and focus management included
• 🎨 Composable - Build complex UIs by combining simple, reusable components
• 📘 Type Safe - Full TypeScript support with extensible type definitions
• ⚡ Svelte 5 Native - Built for Svelte 5 runes, snippets, and modern reactivity

Quick Start

npm install @svelte-atoms/core

<script lang="ts">
	import { Button, Dialog } from '@svelte-atoms/core';

	let open = $state(false);
</script>

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

<Dialog.Root bind:open>
	<Dialog.Content>
		<Dialog.Header>
			<Dialog.Title>Welcome</Dialog.Title>
		</Dialog.Header>
		<Dialog.Body>
			<p>This is a headless, accessible dialog component.</p>
		</Dialog.Body>
		<Dialog.Footer>
			<Button onclick={() => (open = false)}>Close</Button>
		</Dialog.Footer>
	</Dialog.Content>
</Dialog.Root>

Core Concepts

Composability with base and as

Transform any component into another element or wrap it with custom logic:

<script lang="ts">
	import { Button, Popover, Input } from '@svelte-atoms/core';
</script>

<!-- Button as Popover trigger -->
<Popover.Root>
	<Popover.Trigger base={Button} variant="outline">
		Open Popover
	</Popover.Trigger>
	<Popover.Content>
		<p>Configure your preferences here.</p>
	</Popover.Content>
</Popover.Root>

<!-- Input as Dropdown trigger -->
<Dropdown.Root>
	<Dropdown.Trigger base={Input.Root}>
		<Input.Control placeholder="Search..." />
	</Dropdown.Trigger>
	<Dropdown.Content>
		<!-- items -->
	</Dropdown.Content>
</Dropdown.Root>

Typed Snippets for Extensibility

All components expose typed snippet props for maximum flexibility:

<Dialog.Root>
	{#snippet children({ dialog })}
		<Dialog.Content>
			<Dialog.Body>
				<p>Access the dialog bond directly</p>
				<button onclick={() => dialog.close()}>Close via bond</button>
			</Dialog.Body>
		</Dialog.Content>
	{/snippet}
</Dialog.Root>

Styling with Variants

Create reusable variants locally or globally:

import { defineVariants } from '@svelte-atoms/core/utils';

const buttonVariants = defineVariants({
	class: 'inline-flex items-center justify-center rounded-md',
	variants: {
		variant: {
			primary: 'bg-blue-500 text-white hover:bg-blue-600',
			secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300'
		},
		size: {
			sm: 'h-8 px-3 text-sm',
			md: 'h-10 px-4',
			lg: 'h-12 px-6 text-lg'
		}
	},
	defaults: {
		variant: 'primary',
		size: 'md'
	}
});

Components

Layout: Container, Stack, Layer, Portal
Forms: Input, Textarea, Checkbox, Radio, Select, Combobox, Form
Overlays: Dialog, Drawer, Popover, Tooltip, Toast
Navigation: Tabs, Sidebar, Menu, Dropdown
Display: Card, Alert, Badge, Chip, List, Datagrid, Calendar
Utilities: Root, Lazy, Link, Button

View all components in Storybook →

Documentation

• Full Documentation - Guides, API references, and examples
• Storybook - Interactive component playground
• GitHub - Source code and issues

Development

# Clone and install
git clone https://github.com/svelte-atoms/core.git
cd core
bun install

# Start dev server
bun dev

# Build library
bun run build

License

MIT © Svelte Atoms Team