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 { Toaster } from "@downcity/ui";
import { toast } from "sonner";

Mount The Container

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

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

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

Tooltip

Use for short hints, hotkey labels, and low-priority helper text

UI SDK Modules

Review the complete public export surface of @downcity/ui

Table of Contents

Toaster Import Mount The Container Trigger A Toast Themes Usage Notes