toast-mi1y

A simple, flexible, and modern toast notification library for Svelte 5. Easily display beautiful notifications in your SvelteKit or Svelte 5 app with minimal setup.

Screenshots

| Success | Info | Warning | Error | Confirm | |--------|------|---------|-------|-------| | | | | |

Features

• ⚡ Instant setup – just drop in the component
• 🪶 Lightweight, minimal dependencies (uses Svelte's built-in fly transition)
• 🧩 Works with Svelte 5 runes and SvelteKit
• 🕹️ API for success, info, warning, error, and confirm toasts
• 💬 Ready for dynamic values (e.g. i18n)

Installation

pnpm i @mi1y/toast-mi1y
# or
npm i @mi1y/toast-mi1y

Quick Start

Add the toast component to your main layout (e.g. +layout.svelte):

<script lang="ts">
  import { InitToast } from '@mi1y/toast-mi1y';
</script>

<InitToast />
<slot />

InitToast is required once in your app to mount the toast component.

Usage Examples

Import toast and use it anywhere in your app to trigger notifications:

import { toast } from '@mi1y/toast-mi1y';

toast.success("This is a sample success toast!");
toast.info("This is a sample info toast!");
toast.warning("This is a sample warning toast!");
toast.error("This is a sample error toast!");

// Dynamic values (e.g. with i18n)
toast.success($LL.success);

// Confirm toast example
let confirmResult: boolean | null = null;
async function showConfirm() {
  const result = await toast.confirm("Are you sure?");
  confirmResult = result;
}

Example Svelte usage:

<script lang="ts">
  import { InitToast, toast } from '@mi1y/toast-mi1y';

  function showSuccess() {
    toast.success("This is a sample success toast!");
  }
  function showInfo() {
    toast.info("This is a sample info toast!");
  }
  function showWarning() {
    toast.warning("This is a sample warning toast!");
  }
  function showError() {
    toast.error("This is a sample error toast!");
  }

  let confirmResult: boolean | null = null;
  async function showConfirm() {
    const result = await toast.confirm("Are you sure?");
    confirmResult = result;
  }
</script>

<div>
  <button on:click={showSuccess}>Show success toast</button>
  <button on:click={showInfo}>Show info toast</button>
  <button on:click={showWarning}>Show warning toast</button>
  <button on:click={showError}>Show error toast</button>
  <button on:click={showConfirm}>Show confirm toast</button>
  {#if confirmResult !== null}
    <p>Confirm result: {confirmResult ? 'Confirmed' : 'Cancelled'}</p>
  {/if}
</div>

<InitToast />