Components
Glass Toast
A glass toast system — call toast() from anywhere; a portaled viewport stacks frosted notifications that auto-dismiss.
Playground
Edit the props live and copy the config.
Position
Variant
// mount once, near the root
<GlassToaster position="bottom-right" />
// then fire from anywhere
toast({ title: "Saved", description: "…", variant: "default" });Install
npx shadcn@latest add https://websiteglass.com/r/glass-toast.jsonUsage
Mount the viewport once near your app root:
import { GlassToaster } from '@/components/ui/glass-toast';
<GlassToaster position="bottom-right" />Then fire toasts from anywhere:
import { toast } from '@/components/ui/glass-toast';
toast("Saved");
toast({ title: "Deployed", description: "Build succeeded.", variant: "success" });
toast({ title: "Failed", description: "Try again.", variant: "error" });API
| Export | Description |
|---|---|
GlassToaster | The viewport. Takes position (bottom-right default, plus the other corners). |
toast(input) | Pushes a toast; input is a string or { title, description, variant, duration }. Returns the id. |
dismissToast(id) | Removes a toast early. |
Toasts auto-dismiss after duration (default 4000ms) and can be closed with the × button. The store is a singleton, so toast() works from anywhere — no provider/context needed.