# Sonner An opinionated toast component for Svelte. [Docs](https://svelte-sonner.vercel.app/) [API Reference](https://github.com/wobsoriano/svelte-sonner) ```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](https://shadcn-svelte.com/docs/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` Run the following command: ```bash pnpm dlx shadcn-svelte@latest add sonner ``` ```bash npx shadcn-svelte@latest add sonner ``` ```bash bun x shadcn-svelte@latest add sonner ``` Add the Toaster component +layout.svelte ```svelte {@render children?.()} ``` ## Usage ```svelte ```