Changes saved
Your profile is up to date.
Bottom-right toasts slide in from the edge, stack three high, and the oldest slides out and collapses to make room as new ones keep arriving.
The import and the props worth knowing about, in one place.
import { Notification22 } from "@/components/beste/piece/notification22";
<Notification22
toasts={[
{
"kind": "success",
"title": "Changes saved",
"body": "Your profile is up to date."
},
{
"kind": "info",
"title": "New comment",
"body": "Nina Simone replied to your note."
},
{
"kind": "warning",
"title": "Storage almost full",
"body": "92% of 50 GB used."
},
{
"kind": "success",
"title": "Invite sent",
"body": "Miles Davis will get an email."
},
{
"kind": "info",
"title": "Export ready",
"body": "Q3 report is available to download."
}
]}
/>Can you review the chorus mix before tonight?
Notifications drop in from the top and push the older ones back into a shrinking, fading stack, the way a phone lock screen piles them up.
Access request
Noah Reyes wants the records role
An actionable notification card with an icon tile, a request line, and a pair of approve and decline buttons.
New booking confirmed
Rowan Blake · 09:00
A compact single-line toast with a tinted icon chip, a title and meta line, and a relative timestamp.
Tinted alert with error, warning, or info severities. Optional dismiss × on the right.