Skip to main content

​
Installation

Get started with Svelte Atoms Core by installing the package in your Svelte 5 project.

​
Prerequisites

Before installing Svelte Atoms Core, make sure you have:
  • Node.js 18.x or higher
  • Svelte 5.46.4 or higher
  • A Svelte or SvelteKit project set up
Svelte Atoms Core is built specifically for Svelte 5 and uses runes extensively. It is not compatible with Svelte 4 or earlier versions.

​
Install the Package

Choose your preferred package manager to install @svelte-atoms/core: 
npm install @svelte-atoms/core

​
Package Information

Current Version: 1.0.0-alpha.41
License: MIT
Peer Dependency: svelte ^5.46.4

​
Optional: Import Styles

Svelte Atoms Core is headless by default, but provides optional Tailwind CSS presets for quick styling.

​
Using Tailwind CSS

If you’re using Tailwind CSS, you can import the base styles: 
// In your main app file or layout
import '@svelte-atoms/core/tw';
// or
import '@svelte-atoms/core/styles/root';
The library uses Tailwind CSS v4 and integrates seamlessly with the @tailwindcss/vite plugin.

​
TypeScript Configuration

Svelte Atoms Core is written in TypeScript and includes comprehensive type definitions. No additional configuration is needed - types are automatically available when you import components.
tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "moduleResolution": "bundler",
    "target": "ESNext",
    "module": "ESNext"
  }
}

​
Verify Installation

Create a simple test component to verify your installation:
+page.svelte
<script lang="ts">
  import { Button } from '@svelte-atoms/core';
</script>

<Button onclick={() => alert('Svelte Atoms Core is working!')}>Click Me</Button>
If the button renders and responds to clicks, you’re all set!

​
Importing Components

Svelte Atoms Core uses a modular architecture. You can import from the main package or from specific component paths:

​
Main Package Import

import { Button, Dialog, Input, Dropdown } from '@svelte-atoms/core';

​
Specific Component Import

import { Button } from '@svelte-atoms/core/button';
import { Dialog } from '@svelte-atoms/core/dialog';
import { Input } from '@svelte-atoms/core/input';

​
Utility Imports

import { defineVariants } from '@svelte-atoms/core/utils';
import { filter } from '@svelte-atoms/core/dropdown';
Component-specific imports can help with tree-shaking and reduce bundle size in larger applications.

​
Available Components

Svelte Atoms Core includes over 30 components:

Accordion

Collapsible content sections

Alert

Alert and notification messages

Avatar

User profile images

Badge

Status and label badges

Button

Interactive buttons

Calendar

Date selection

Card

Container component

Checkbox

Checkbox inputs

Combobox

Searchable select

Dialog

Modal dialogs

Dropdown

Dropdown menus

Input

Text inputs

Menu

Navigation menus

Popover

Floating content

Tabs

Tabbed interfaces

Toast

Toast notifications

​
Dependencies

Svelte Atoms Core includes the following dependencies:
  • @floating-ui/dom - Positioning engine for floating elements
  • @qrcode-js/browser - QR code generation
  • clsx - Conditional class names
  • date-fns - Date utilities
  • es-toolkit - Modern utility library
  • motion - Animation library
  • nanoid - Unique ID generation
  • tailwind-merge - Merge Tailwind classes
These dependencies are bundled with the library and installed automatically.

​
Next Steps

Now that you have Svelte Atoms Core installed, you’re ready to start building!

Quick Start Guide

Build your first component with a complete example

Component Library

Explore all available components

Build docs developers (and LLMs) love

Get started for freeTalk to us