Sonner
An opinionated toast component for Svelte.
About
The Sonner component is provided by svelte-sonner, which is a Svelte port of Sonner, originally created by Emil Kowalski for React.
Installation
Setup
First, add the Toaster component to your root layout.
<!-- +layout.svelte -->
<script lang="ts">
import { Toaster } from "$lib/components/ui/sonner/index.js";
let { children } = $props();
</script>
<Toaster />
{@render children?.()}
Usage
<script lang="ts">
import { toast } from "svelte-sonner";
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button onclick={() => toast("Hello world")}>Show toast</Button>