UI / Components / foundations / Toast

Toast

Bottom-right notifications. Severity color.

Stacking notifications anchored bottom-right. 4 severities (info / success / warn / error). Auto-dismiss after 4s; persists on hover. Wire `<ToastProvider>` at app root, fire with `useToast()`.

$npx dock-ui add toast

Usage

import { ToastProvider, useToast } from "@/components/ui/toast";

const toast = useToast();
toast.success("Saved");
toast.error("Could not save");

Install

via CLI

$ npx dock-ui add toast

Writes the file(s) directly to your components/ui/ folder. You own the code.

For agents

curl -L https://ui.trydock.ai/r/toast.json

Returns a JSON manifest with file paths + contents. Agent-readable, LLM-fetchable.

← All components

Themes·Component kit · glossary

View on GitHub →