120k
New

Sonner

PreviousNext

An opinionated toast component for React.

About

Sonner is built and maintained by emilkowalski.

Installation

Run the following command:

pnpm dlx shadcn@latest add @force-ui-svelte/sonner

Add the Toaster component

+layout.svelte
<script lang="ts">
  import { Toaster } from "$lib/components/ui/sonner/index.js";
  let { children } = $props();
</script>
 
{@render children()}
<Toaster />

Usage

<script lang="ts">
  import { toast } from "svelte-sonner";
</script>
<Button onclick={() => toast("Event has been created.")}>Show Toast</Button>

Examples

Types

Description

Position

Use the position prop to change the position of the toast.

API Reference

See the Sonner API Reference for more information.