Toast Notification
A free toast notification system for React and Tailwind CSS with stacked toasts, auto-dismiss timers, and success, error, and info variants. Lightweight and fully copy-paste ready.
✓
Saved
Your changes are live.
Copy the code
export function Toast() {
return (
<div className="flex w-72 items-center gap-3 rounded-2xl border border-emerald-400/40
bg-emerald-400/10 px-4 py-3 text-white">
<span className="grid h-7 w-7 place-items-center rounded-full bg-emerald-400 font-extrabold text-emerald-950">✓</span>
<div>
<div className="text-sm font-bold">Saved</div>
<div className="text-xs text-white/60">Your changes are live.</div>
</div>
</div>
)
}Tailwind CSS · no dependencies · MIT licensed. Paste it straight into any React, Next.js or Vite project.
About the toast notification
This toast notification is part of Empire UI — a free, open-source library of 26+ component types rendered across 40 visual styles, from glassmorphism to neo-brutalism. Every block is copy-paste ready in React and Tailwind CSS with no runtime dependencies.
Want it in a different look? Browse all 40 styles or grab the matching glassmorphism components.