Back to Alert Dialogs
Session Expiring
A neutral caution alert dialog with a large live countdown and a draining progress bar before the session times out.
Your session is about to expire
Extend your session to avoid losing unsaved changes.
02:00
Alert Dialogsdialogalert-dialogmodalcautioncountdown
Stack: React + Tailwind CSS + shadcn/ui — every prompt is written for this stack and is most accurate in it.
Dependencies: lucide-react
Overview
Layout
Large mm:ss countdown + draining progress bar
Color
bg-muted icon chip — neutral, no accent color borrowed
Motion
Bar width transitions 1000ms linear each tick
Actions
Log out (dismiss) / Stay signed in (confirm)