What is Svelte-Sileo?

An opinionated toast component for Svelte. Gooey SVG morphing, spring physics, and a minimal API — beautiful by default.

A Svelte port of hiaaryan/sileo.

Features

• Gooey Morphing — SVG-based pill shape that smoothly morphs when expanding.
• Spring Physics — All animations driven by spring easing for a natural feel.
• Promise API — First-class support for async operations with loading → success/error transitions.
• Custom Components — Pass a Svelte component as description for rich toast content.
• Custom Icons — Swap the default state icon with any Svelte component.
• Action Button — Inline button with a callback, styled per toast state.
• Autopilot — Toasts auto-expand to show the description, then collapse before dismissing.
• Swipe to dismiss — Native swipe gesture support on mobile.
• 6 Positions — top-left, top-center, top-right, bottom-left, bottom-center, bottom-right.
• Fully typed — Written in TypeScript with full type coverage.

Installation

npm install svelte-sileo
# or
pnpm add svelte-sileo
# or
yarn add svelte-sileo

Quick Start

Add <Toaster /> to your layout. Then call sileo from anywhere.

<script lang="ts">
  import { Toaster, sileo } from 'svelte-sileo';
</script>

<Toaster />

<button onclick={() => sileo.success({ title: 'Changes saved' })}>
  Toast
</button>

API

sileo.success(opts)

sileo.success({ title: 'Changes saved' });

sileo.error(opts)

sileo.error({
  title: 'Something went wrong',
  description: 'Please try again later.'
});

sileo.warning(opts)

sileo.warning({ title: 'Storage almost full' });

sileo.info(opts)

sileo.info({ title: 'New update available' });

sileo.action(opts)

Renders a toast with an inline action button.

sileo.action({
  title: 'File uploaded',
  description: 'Share it with your team?',
  button: {
    title: 'Share',
    onClick: () => {}
  }
});

sileo.promise(promise, opts)

Starts in a loading state and transitions to success or error automatically.

sileo.promise(
  new Promise((resolve) => setTimeout(resolve, 2000)),
  {
    loading: { title: 'Saving record...' },
    success: { title: 'Record saved' },
    error:   { title: 'Failed to save' }
  }
);

You can also pass a function to success or error to use the resolved value or error:

sileo.promise(fetchUser(), {
  loading: { title: 'Loading user...' },
  success: (data) => ({ title: `Welcome, ${data.name}!` }),
  error:   (err)  => ({ title: `Error: ${err.message}` })
});

When the promise resolves you can show an action state instead of success:

sileo.promise(uploadFile(), {
  loading: { title: 'Uploading...' },
  success: { title: 'Done' },
  action:  { title: 'File ready', button: { title: 'Download', onClick: () => {} } },
  error:   { title: 'Upload failed' }
});

sileo.show(opts)

Generic toast with no default state icon.

sileo.show({ title: 'Hello world' });

sileo.dismiss(id)

Dismiss a specific toast by id.

const id = sileo.success({ title: 'Saved' });

sileo.dismiss(id);

sileo.clear(position?)

Dismiss all toasts, optionally scoped to a position.

sileo.clear();
sileo.clear('top-right');

Options

Every method accepts a SileoOptions object:

Toaster Props

Custom Description Component

Pass any Svelte component as description for rich content:

<!-- InvoiceToast.svelte -->
<div class="flex flex-col gap-2">
  <span class="text-xs opacity-50">Invoice #INV-2024-001</span>
  <span class="font-medium">$1,200.00 · 3 items</span>
</div>

import InvoiceToast from './InvoiceToast.svelte';

sileo.success({
  title: 'Invoice sent',
  description: InvoiceToast,
  button: { title: 'View', onClick: () => {} }
});

Custom Icon

import RocketIcon from './RocketIcon.svelte';

sileo.success({
  title: 'Deployed',
  icon: RocketIcon
});

Positions

<!-- Available: top-left · top-center · top-right · bottom-left · bottom-center · bottom-right -->
<Toaster position="bottom-center" />

License