Components
Toast
Toasts are Sonner, mounted once in the root layout at bottom centre with a 3s duration — the legacy defaults, high enough above the mobile tab bar not to collide with it.
Usage
Fire toasts through showToast(message, type) from lib/toast.ts — the
legacy call signature, kept so ported code reads the same. Four types; info
is the default.
import { showToast } from "@/lib/toast";
showToast("List published.", "success");
showToast("Couldn't reach the server.", "error");Surface
Sonner paints its own surface, so the wrapper hands it the theme explicitly —
resolvedTheme, not theme, because “system” is not a value it understands —
and maps its CSS variables onto the popover tokens: --popover ground,
--border hairline, --radius corner. Icons are the Lucide set at size-4,
with the loading state on a spinning Loader2.