---
title: Sonner
description: Opinionated toast notifications for short-lived feedback.
order: 28
tags: [components]
---

import { Preview } from "$lib/components/preview";
import { SonnerDemo } from "$lib/components/sonner-demo";

# Sonner

Sonner provides non-blocking toast notifications using Areia's Ilha component API.
Render Areia's `Toaster` once in your app shell, then call `toast` from the same module or from the [`sonner`](https://sonner.emilkowal.ski/) peer package.

Toasts are **not** included in the main `areia` bundle. Import from **`areia/sonner`** so Ilha apps that only use inputs, buttons, and layout never pull in Sonner (and its React dependency) at startup.

[Source Code](https://github.com/ilhajs/areia/blob/main/packages/areia/src/components/sonner/index.ts)

## Import

Install the peer dependency when you use toasts:

```bash
npm install sonner
```

```ts
import { Toaster, toast } from "areia/sonner";
```

You can also import `toast` from `"sonner"` directly; Areia's toaster subscribes to the same global toast store.

```ts
import { Toaster } from "areia/sonner";
import { toast } from "sonner";
```

## Setup

Add the toaster once near the root of your app.

<Preview
  code={
    'import { Toaster } from "areia/sonner";\n\n<Toaster position="bottom-right" closeButton theme="system" />;'
  }
  lang="tsx"
  codeOnly
/>

## Usage

```ts
import { toast } from "areia/sonner";

toast.success("Project saved");
toast.error("Something went wrong");
toast.message("Invite sent", {
  description: "Your teammate will receive an email shortly.",
});
```

## Example

<Preview
  code={
    '// @ts-nocheck\n// ---cut---\nimport ilha from "ilha";\nimport { Button } from "areia";\nimport { Toaster, toast } from "areia/sonner";\n\nexport default ilha\n  .on("button@click", () => {\n    toast.success("Project saved", {\n      description: "Your changes are now live.",\n    });\n  })\n  .render(() => (\n    <div class="flex flex-col gap-4">\n      <Button variant="primary">Save project</Button>\n      <Toaster\n        position="bottom-right"\n        closeButton\n        richColors\n        theme="system"\n      />\n    </div>\n  ));'
  }
  lang="tsx"
  size="sm"
>
  <SonnerDemo />
</Preview>

## API

### Toaster

```ts
Toaster({
  position: "bottom-right",
  theme: "system",
  closeButton: true,
  duration: 4000,
  visibleToasts: 3,
});
```

### toast

```ts
toast("Default toast");
toast.success("Success");
toast.info("Info");
toast.warning("Warning");
toast.error("Error");
toast.loading("Loading");
toast.dismiss();
```

Use toasts for short-lived, non-blocking feedback. For confirmations or required decisions, use `Dialog` instead.