Frosted toasts for success, error, info and in-flight work, stacked as a deck that fans out on hover.
Mount ToastProvider once in the root layout and call useToast(). success and info leave after 5 seconds with a timer rule; error and loading stay until dismissed or settled. toast.promise shows loading, then success or error when the promise settles.
Installation
npx shadcn@latest add KezLahd/rime/toastAlso installs: base, icon, spinner.
Usage
import { useToast } from "@/components/ui";
const toast = useToast();
await toast.promise(save(), { loading: "Saving…", success: "Saved", error: "Couldn't save" });Examples
The stack
Tones
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --button-case | none | … |
| --button-size-sm | 12.5px | … |
| --button-tracking | 0 | … |
| --toast-blur | blur(28px) saturate(180%) | … |
| --toast-icon-radius | var(--r-sm) | … |
| --toast-radius | var(--r-lg) | … |
| --toast-rgb-error | 237, 93, 87 | … |
| --toast-rgb-info | 110, 84, 153 | … |
| --toast-rgb-success | 52, 168, 112 | … |
| --toast-surface | rgba(var(--rgb-white), 0.82) | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --brand-gradient | tokens.css | … |
| --danger-ink | tokens.css | … |
| --density | tokens.css | … |
| --dur | tokens.css | … |
| --ease | tokens.css | … |
| --ease-out | tokens.css | … |
| --focus-ring | tokens.css | … |
| --font-body | tokens.css | … |
| --front-height | tokens.css | … |
| --index | tokens.css | … |
| --ink-brand | tokens.css | … |
| --ink-heading | tokens.css | … |
| --ink-muted | tokens.css | … |
| --ink-secondary | tokens.css | … |
| --line-brand | tokens.css | … |
| --line-brand-strong | tokens.css | … |
| --offset | tokens.css | … |
| --own-height | tokens.css | … |
| --r-lg | tokens.css | … |
| --r-sm | tokens.css | … |
| --r-xs | tokens.css | … |
| --rgb-brand-deep | tokens.css | … |
| --rgb-contact | tokens.css | … |
| --rgb-white | tokens.css | … |
| --success-gradient | tokens.css | … |
| --success-ink | tokens.css | … |
| --text-body | tokens.css | … |
| --text-small | tokens.css | … |
| --toast-duration | tokens.css | … |
| --wash-active | tokens.css | … |
| --wash-strong | tokens.css | … |
| --wash-subtle | tokens.css | … |
| --z-toast | tokens.css | … |
Accessibility
- The stack sits in a region labelled "Notifications" with a polite live list, and stays live while a Modal makes the rest of the page inert.
- Hover or focus inside fans the stack out and pauses every timer; toasts never take focus.
Do and don't
Do
- Confirm what was done, with the record's name or reference.
Don't
- Don't put the only copy of important information in a toast.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open toast.md