shadcn.io is not affiliated with official shadcn/ui
Session Limit Login Block for Solid
A sign-in gate for a video streaming service: a meter of screens in use, three sessions as radio rows, and one button that ends the chosen session so this browser can continue.
Installation
Overview
Make a cap something a person can act on, with this session limit login block for Solid with Ark UI. It's the screen limit of Viewmoor, a video streaming service, shown as a panel with a short header over one framed panel. A meter says how many of the plan's three screens are in use ("3 of 3") with a Progress bar, and under it the three sessions are radio rows: the device, the app and the place, and a fixed last-active line. End this session and continue is the one Shine Button: pressed with no row chosen it says so and moves focus to the list; pressed with one it ends that session, the meter reads "2 of 3", the ended row stays in its place struck through and the other rows stay too. End all others empties the meter instead, and the quiet See plans link only points to the plans. It's built from Progress, Button, Shine Button and Guides, with native radio inputs and a CSS entrance only. For device and screen limits where a person must give one up to sign in.
FAQ
What stays in the page, and how do I wire it for real?
Everything. The three sessions, their places and the last-active times are typed constants; ending one waits 700 milliseconds and changes the page's state only. No session is really ended and nothing is sent. In a product, list the account's live sessions from your server, end the chosen one there (which also signs that device out), and only then start the new session.
How is this different from a sessions page in an account area?
It is a gate, not a manager. It appears at the moment a sign-in is blocked, offers only the choice that unblocks it (give up one screen) and ends once the way is clear; it doesn't show history, locations on a map or every device you have ever used. The account area's sessions page does that, after you are in.
Why is the button quiet until a row is chosen, and not disabled?
A disabled button explains nothing and is skipped by the keyboard. Here it stays focusable and pressable but looks quiet while nothing is chosen; pressing it says "Choose a session to end first." in the status line and moves focus to the first row, so the next key choice is the first step. Once a row is chosen it takes the full look.
How do the rows work with a keyboard and a screen reader?
They are native radio inputs in one group named "Choose one to end": arrow keys move between rows, and each row is read as its device name with the app, place and last-active time as its description. The drawn mark is hidden from assistive technology. An ended row is struck through, says "Ended" in words and is no longer a choice.
What does End all others do?
It ends every listed session, with the same short wait, and the meter reads "0 of 3". The button after either choice becomes "Continue to Viewmoor", which only says that nothing opens in the demo; Start over brings the three sessions back and returns focus to the list.
How are the last-active times kept honest?
Each is an ISO time in the data, formatted by a helper: a session from the demo's day shows only a clock time ("today, 13:52 UTC"), an older one shows the date ("Oct 12, 18:30 UTC"). The demo's "today" is a typed constant, never the clock, so the page reads the same whenever it is opened.