← Docs
Recipe

Toast Notifications

Non-blocking feedback that slides in from the edge of the screen and auto-dismisses.

Preview

License activated successfully
Session expired — re-authenticating
Update available — v3.2.1

Structure

<div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2">
  <div className="flex items-center gap-3 rounded-lg
    border border-emerald-500/20 bg-emerald-500/5
    px-4 py-3 text-sm shadow-lg backdrop-blur">
    <div className="h-2 w-2 rounded-full bg-emerald-400" />
    <span>Message text</span>
  </div>
</div>

Variants

Success
Error
Warning
Info

Positioning

top-left
top-center
top-right
bottom-left
bottom-center
bottom-right

Default: bottom-right. Use fixed positioning with z-50.