Components

Toaster

Use for global toast notifications, styled through a sonner wrapper

Toaster

Toaster is the notification container. It renders the toast layer for the app.

Import

import { ThemeContainer, Toaster } from "@downcity/ui";
import { toast } from "sonner";

Mount The Container

import { Toaster } from "@downcity/ui";

export function AppShell() {
  return (
    <ThemeContainer variant="neutral" mode="light">
      <Toaster position="top-center" richColors />
      <main>...</main>
    </ThemeContainer>
  );
}

Toaster does not accept a separate theme prop. Notifications inherit ThemeContainer like every other component.

Trigger A Toast

import { Button } from "@downcity/ui";
import { toast } from "sonner";

export function SaveAction() {
  return (
    <Button
      size="sm"
      onClick={() => {
        toast.success("Saved successfully");
      }}
    >
      Save
    </Button>
  );
}

Themes

light
dark
system

Usage Notes

Mount Toaster once near the app root
Keep using toast from sonner for actual notifications
Avoid mounting multiple toaster containers per page

Typography

A complete semantic rendering layer for headings, prose, quotes, lists, and annotations

Toaster

Unified toast notification component with theme-aware styling

Table of Contents

Toaster Import Mount The Container Trigger A Toast Themes Usage Notes