shadcn.io is not affiliated with official shadcn/ui
Session Countdown Banner Block for React Aria
A session timeout notice for a banking console: a shield, the minutes and seconds left, a Stay signed in button that starts the time over, a warning shield in the last minute, and a Sign in again link at zero.
Installation
Overview
A session timeout banner for React with React Aria. On a faint tinted strip between the page's rails sit a shield, "Session ends in" with the minutes and seconds left, a line on why, and an outline Shine Button, Stay signed in, that starts the five minutes over. In the last minute the shield turns the warning colour; at zero the strip reads "Session expired" and the button becomes a link, Sign in again, with the keyboard kept where it was. The digits stay out of a screen reader's way: the timer carries a sentence ("4 minutes 32 seconds left") and a polite status speaks only at five minutes, one minute and zero. It's built from Timer, Guides and Shine Button, with your theme's tokens for every colour. For admin consoles, banking and health apps, and any place a session expires for security.
FAQ
Why doesn't a screen reader read the countdown?
A countdown read out every second would make the page unusable, and a silent one would hide the deadline. The timer is a labelled timer element, which isn't announced as it changes, and its digits are hidden from assistive technology in favour of its label, a sentence with the time left. A separate polite status line speaks three times only: "Your session ends in 5 minutes.", "Your session ends in 1 minute." and "Your session has expired."
What does Stay signed in do?
It restarts the clock at five minutes, puts the shield back to normal and announces "Session extended. It ends in 5 minutes." The button only changes the timer: in your app, call your session refresh endpoint in stay and restart the clock from its answer.
What happens at zero, and where does focus go?
The strip reads "Session expired" with a line saying you were signed out, and the button is replaced by a Sign in again link. Because the button the keyboard was on disappears, focus moves to the new link when it had been on the button; otherwise it stays where it was. The status line announces the expiry.
How is the last minute shown?
The shield switches from a check to an alert shape and takes the warning colour, on the icon only. The text and the digits stay in the foreground colour, and the icon's shape and the status line say the same thing, so it reads without colour.
Where does the Sign in again link go?
It's a link (href="#"): point it at your sign-in page. It's an outline Shine Button, small; a band of light sweeps across it once on hover and keyboard focus.
It renders a link because it has an href.
What moves, and what happens with reduced motion?
The strip fades in once when the page loads, and the digits change in place without animating. With reduced motion the fade is off. The seconds stay, because a time limit has to be exact: the clock never animates, it only changes its numbers. On a phone the strip wraps to two lines, and the digits keep their order in a right-to-left layout.