Toast

Toast system (provider + useToast hook) with variants, actions, in-place updates, a collapsed stack that fans out on hover, swipe to dismiss and a pausable countdown bar.

Notifications

Hover the stack to expand it, swipe a toast to dismiss.

Open

placement

duration4000

expand

Installation

npx shadcn@latest add @glint-ui/toast

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/toast.json

Usage

import { Toast } from "@/components/ui/toast";

<ToastProvider placement="bottom-right">
  <App />
</ToastProvider>

// inside a component
const { toast, dismiss } = useToast();
toast({ title: "Saved", variant: "success" });
const id = toast({ title: "Uploading", variant: "loading" });
toast({ id, title: "Uploaded", variant: "success" }); // update in place

Props

Prop	Type	Default	Description
placement	"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"	"bottom-right"	Corner or edge of the stack.
duration	number	4000	Default auto-dismiss time (ms).
expand	boolean	false	Always show the full list instead of a stack.
position	"fixed" \| "absolute"	"fixed"	fixed = viewport; absolute = nearest positioned parent.
children	ReactNode	—	Your app; call useToast() anywhere inside.
className	string	—	Extra classes for the root element.