Notifications

Toast Stack

A stack of success, error, warning, and info toasts with icons and dismiss actions.

Payment received

Your invoice was settled successfully.

Upload failed

The file exceeds the 25 MB limit.

Storage almost full

You are using 92% of your quota.

New version available

Refresh to update to the latest build.

Installation

Install with the CLI, or add the packages and paste the source below.

CLI

Add Toast Stack to your app with its source-owned dependencies.

bash

npx cooud-ui add toast-stack

Manual

Install the Cooud UI packages, then paste the block below.

pnpm add @cooud-ui/ui @cooud-ui/tokens @cooud-ui/theme

Usage

Copy the source for Toast Stack. Every class is a semantic token, so it re-themes with your app.

tsx

import { Button, Reveal } from "@cooud-ui/ui";
import { CheckCircle2, Info, TriangleAlert, X, XCircle } from "lucide-react";

export function ToastStackBlock() {
  return (
    <div className="flex w-full items-center justify-center py-4">
      <div className="flex max-w-sm flex-col gap-3">
        <Reveal delay={0.04}>
          <div className="flex items-start gap-3 rounded-xl border border-border bg-surface-raised p-4 shadow-lg">
            <CheckCircle2 className="mt-0.5 size-5 shrink-0 text-success" aria-hidden="true" />
            <div className="flex min-w-0 flex-1 flex-col gap-0.5">
              <p className="font-medium text-fg text-sm">Payment received</p>
              <p className="text-fg-secondary text-sm">Your invoice was settled successfully.</p>
            </div>
            <Button variant="ghost" size="icon" aria-label="Dismiss" className="-mr-1 -mt-1 size-7 text-fg-tertiary">
              <X className="size-4" aria-hidden="true" />
            </Button>
          </div>
        </Reveal>

        <Reveal delay={0.08}>
          <div className="flex items-start gap-3 rounded-xl border border-border bg-surface-raised p-4 shadow-lg">
            <XCircle className="mt-0.5 size-5 shrink-0 text-error" aria-hidden="true" />
            <div className="flex min-w-0 flex-1 flex-col gap-0.5">
              <p className="font-medium text-fg text-sm">Upload failed</p>
              <p className="text-fg-secondary text-sm">The file exceeds the 25 MB limit.</p>
            </div>
            <Button variant="ghost" size="icon" aria-label="Dismiss" className="-mr-1 -mt-1 size-7 text-fg-tertiary">
              <X className="size-4" aria-hidden="true" />
            </Button>
          </div>
        </Reveal>

        <Reveal delay={0.12}>
          <div className="flex items-start gap-3 rounded-xl border border-border bg-surface-raised p-4 shadow-lg">
            <TriangleAlert className="mt-0.5 size-5 shrink-0 text-warning" aria-hidden="true" />
            <div className="flex min-w-0 flex-1 flex-col gap-0.5">
              <p className="font-medium text-fg text-sm">Storage almost full</p>
              <p className="text-fg-secondary text-sm">You are using 92% of your quota.</p>
            </div>
            <Button variant="ghost" size="icon" aria-label="Dismiss" className="-mr-1 -mt-1 size-7 text-fg-tertiary">
              <X className="size-4" aria-hidden="true" />
            </Button>
          </div>
        </Reveal>

        <Reveal delay={0.16}>
          <div className="flex items-start gap-3 rounded-xl border border-border bg-surface-raised p-4 shadow-lg">
            <Info className="mt-0.5 size-5 shrink-0 text-info" aria-hidden="true" />
            <div className="flex min-w-0 flex-1 flex-col gap-0.5">
              <p className="font-medium text-fg text-sm">New version available</p>
              <p className="text-fg-secondary text-sm">Refresh to update to the latest build.</p>
            </div>
            <Button variant="ghost" size="icon" aria-label="Dismiss" className="-mr-1 -mt-1 size-7 text-fg-tertiary">
              <X className="size-4" aria-hidden="true" />
            </Button>
          </div>
        </Reveal>
      </div>
    </div>
  );
}