Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Success blocks

Pro

Signed Out Devices Success Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show people exactly what a sign-out sweep did with this confirmation panel for React with Base 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.

How does it look on a phone?

The header's button drops under the sentence and each device becomes a short stack: its name and place, then its state under it. The marks stay on one line.

  • Pro

    Active Sessions Account

    Sessions and devices

    The open sessions of an account with how each one signed in, when it started, was last active and ends, an idle filter, a two-step sign-out per row and one button that signs out the rest.

  • Pro

    Session History Account

    Sessions and devices

    The last seven days of sessions as a swimlane: a lane per device, each session a bar placed by its start and length, revoked ones ending in a cut mark, and a popover with the id, length, address and how it ended.

  • Pro

    Trusted Device Management Login

    Sessions and devices

    A panel of trusted devices for a smart-home app: each has a trust-expiry meter, Forget asks in an alert dialog, Undo brings the last one back and a Shine Button trusts this browser for 30 days.

  • Pro

    Trusted Devices Account

    Sessions and devices

    An account's trusted devices as a table of devices against two switches, one to skip the sign-in code and one to skip the password prompt, with a sentence on what each device's choice means and a meter against the limit.

  • Pro

    Session Policy Settings

    Sign-in and security

    A session policy settings panel that leads with the sentence the settings amount to, two sliders with stops for the idle timeout and the longest session that hold each other to one rule, a device limit and an end-all-sessions dialog.

  • Pro

    Two-Factor Recovery Codes Success

    Security and access

    A two-step sign-in confirmation page: what was turned on, eight single-use recovery codes in a framed sheet with copy and download, and a Finish setup button that stays dimmed until you tick that you saved them.

All 100 success blocks