Recipe

Toast Notification Design

A lightweight, accessible toast system built with pure Tailwind CSS and zero JavaScript dependencies. Slide in, auto-dismiss, stack gracefully.

Preview

✓

Settings saved successfully

just now

Failed to upload file. Retry?

2s ago

New update available — v2.4.1

5s ago

Semantic indicator — success, error, info, warning

Single-line body text, max 120 characters

Relative time label, right-aligned, muted

Toasts stack from the bottom-right with 12px gap. New toasts push older ones upward. Max 5 visible — oldest auto-dismiss after 4s.

<div class="fixed bottom-6 right-6 flex flex-col gap-3 z-50">
  <!-- Toasts rendered here -->
</div>