shadcn.io is not affiliated with official shadcn/ui
Signed Out Devices Success Block for Ark UI
A confirmation panel for signing out every other session: a row of marks for how many sessions remain, the four devices with a state each and a ghost Sign out here too that signs this device out on the page.
Installation
Overview
Show people exactly what a sign-out sweep did with this confirmation panel for React with Ark UI. It's the panel Hushwren, a private email app, shows after its owner chose Sign out everywhere else: a header with one action, the Shine Button that opens security settings, over one framed card ruled by Guides. Its first band counts the sessions with a row of four marks, hollow where a session ended and solid where one is still signed in, and "1 of 4 signed in" in words. The second lists the four devices, each with an icon, a name, where it signed in, when it was last active and a state: Signed out, with the time, for the three that were swept, and Signed in for this device, which carries a ghost Button, Sign out here too, with a Badge naming it. A foot says what to do about a device you don't recognise. For security settings, session managers and any account where a sweep should be confirmed.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was signed out: the four devices, their places and times are typed sample data. Sign out here too only changes this page (the row turns to Signed out, the count and marks follow, an Undo takes it back and a polite status line says "Signed out of this device in this demo. Nothing was changed."). To wire it, build DEVICES from your session list after the sweep, and call your revoke endpoint from the button; signing out the current session should also end this page.
How do the row of marks read to a screen reader?
They don't: the marks are a drawing, hidden from assistive technology, and the same count is written beside them as "1 of 4 signed in". Each device row says its state in words too. The marks and the count come from the same list, so they can't disagree.
Is a state only a color?
No. A swept device shows a check and the words "Signed out" with the time; the device still signed in shows a solid dot and "Signed in". A marked device is solid and an ended one is hollow with an outline, in the same weight in light and dark.
Does the card change height when I press Sign out here too?
No. The current device's row always holds a state line and a button, and only their words change, so nothing moves. The other rows hold a state line and a time of the same size.