Glass Toaster
Frosted toasts that stack, fan out, swipe away, and burn down like an ember.
Mount one toaster in your application. Call toast from client interactions. Toasts can be dismissed and are announced as status updates.
Installation
$pnpm dlx shadcn@latest add https://your-docs-domain.com/r/glass-toaster.json
Usage
"use client"
import { GlassToaster, toast } from "@/components/ui/glass-toaster"
import { GlossButton } from "@/components/ui/gloss-button"
export default function Demo() {
return (
<>
<GlossButton
onClick={() =>
toast("Changes saved", {
description: "Your project is up to date.",
})
}
>
Show notification
</GlossButton>
<GlassToaster position="bottom-center" />
</>
)
}
API
| Property | Type | Description |
|---|
position? | keyof typeof positions | The position option. |
visible? | number | how many toasts show in the collapsed stack |
gap? | number | The gap option. |
Standard element attributes are supported where the props extend a React element type. Required properties appear without a question mark.
Dependencies
motion
Its icons come from animate-ui and install with the component.
Shared local files are included in the Code panel. See project setup for Tailwind, path aliases, and theme tokens.