> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/huntabyte/shadcn-svelte/llms.txt
> Use this file to discover all available pages before exploring further.

# Sonner

> An opinionated toast component for Svelte.

## About

The Sonner component is provided by [svelte-sonner](https://svelte-sonner.vercel.app/), which is a Svelte port of [Sonner](https://sonner.emilkowal.ski/), originally created by [Emil Kowalski](https://twitter.com/emilkowalski_) for React.

## Installation

### Setup theme support

By default, Sonner will use the user's system preferences to determine whether to show the light or dark theme. To get around this, you can either pass in a custom `theme` prop to the component, or simply use [mode-watcher](https://github.com/svecosystem/mode-watcher) which you can hardcode to `dark` or `light` mode should you wish.

You can learn more about setting up Dark Mode support [here](/dark-mode).

If you wish to opt out of Dark Mode support, you can uninstall `mode-watcher` and remove the `theme` prop from the component after installing via CLI, or manually install the component and don't include `mode-watcher`.

<Tabs>
  <Tab title="CLI">
    <Steps>
      <Step title="Run the following command">
        ```bash theme={null}
        npx shadcn-svelte@next add sonner
        ```
      </Step>

      <Step title="Add the Toaster component">
        ```svelte showLineNumbers title="+layout.svelte" {2,6} theme={null}
        <script lang="ts">
          import { Toaster } from "$lib/components/ui/sonner/index.js";
          let { children } = $props();
        </script>

        <Toaster />

        {@render children?.()}
        ```
      </Step>
    </Steps>
  </Tab>

  <Tab title="Manual">
    <Steps>
      <Step title="Install svelte-sonner">
        ```bash theme={null}
        npm install svelte-sonner -D
        ```
      </Step>

      <Step title="Copy and paste the component source">
        Copy and paste the component source code into your project.
      </Step>

      <Step title="Add the Toaster component">
        ```svelte showLineNumbers title="+layout.svelte" {2,6} theme={null}
        <script lang="ts">
          import { Toaster } from "$lib/components/ui/sonner/index.js";
          let { children } = $props();
        </script>

        <Toaster />

        {@render children?.()}
        ```
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Usage

```svelte theme={null}
<script lang="ts">
  import { toast } from "svelte-sonner";
  import { Button } from "$lib/components/ui/button/index.js";
</script>
```

```svelte theme={null}
<Button onclick={() => toast("Hello world")}>Show toast</Button>
```

## Examples

The component supports various toast types including success, error, info, and warning.

## Changelog

### 2025-12 Icons

We've updated the Sonner component to use icons from `lucide`. Update your `sonner.svelte` file to use the new icons.

```svelte showLineNumbers title="components/ui/sonner.svelte" {2-6,22-36} theme={null}
<script lang="ts">
  import CircleCheckIcon from "@lucide/svelte/icons/circle-check";
  import InfoIcon from "@lucide/svelte/icons/info";
  import Loader2Icon from "@lucide/svelte/icons/loader-2";
  import OctagonXIcon from "@lucide/svelte/icons/octagon-x";
  import TriangleAlertIcon from "@lucide/svelte/icons/triangle-alert";

  import {
    Toaster as Sonner,
    type ToasterProps as SonnerProps,
  } from "svelte-sonner";
  import { mode } from "mode-watcher";

  let { ...restProps }: SonnerProps = $props();
</script>

<Sonner
  theme={mode.current}
  class="toaster group"
  style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
  {...restProps}
  >{#snippet loadingIcon()}
    <Loader2Icon class="size-4 animate-spin" />
  {/snippet}
  {#snippet successIcon()}
    <CircleCheckIcon class="size-4" />
  {/snippet}
  {#snippet errorIcon()}
    <OctagonXIcon class="size-4" />
  {/snippet}
  {#snippet infoIcon()}
    <InfoIcon class="size-4" />
  {/snippet}
  {#snippet warningIcon()}
    <TriangleAlertIcon class="size-4" />
  {/snippet}
</Sonner>
```

## Links

* [Source](https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/sonner)
* [svelte-sonner Documentation](https://svelte-sonner.vercel.app/)