Sonner

Opinionated toast notifications for short-lived feedback.

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 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

Import

Install the peer dependency when you use toasts:

npm install sonner

pnpm add sonner

yarn add sonner

bun add sonner

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

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

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

Setup

Add the toaster once near the root of your app.

import { Toaster } from "areia/sonner";

<Toaster position="bottom-right" closeButton theme="system" />;

Usage

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

// @ts-nocheck
// ---cut---
import { action, ilha } from "ilha";
import { Button } from "areia";
import { Toaster, toast } from "areia/sonner";

export default ilha(() => {
  const save = action(() => {
    toast.success("Project saved", {
      description: "Your changes are now live.",
    });
  });
  return (
    <div class="flex flex-col gap-4">
      <Button variant="primary" onclick={save}>Save project</Button>
      <Toaster
        position="bottom-right"
        closeButton
        richColors
        theme="system"
      />
    </div>
  );
});

API

Toaster

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

toast

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.