shadcn.io is not affiliated with official shadcn/ui
Devices Account Block for React Aria
The devices that have signed in to an account as hairline tiles grouped by type, each with its browsers, sessions, place, address and a menu to rename or remove it, and one button to remove every other device.
Installation
Overview
Let people see and prune the devices on their account, with this devices panel for React with React Aria. A hairline frame with a plus mark on each corner holds three groups, Computers, Phones and tablets and Other, each a label with its count over a grid of tiles that share hairlines: three across on a wide screen, two on a tablet and one on a phone. A tile has the device's icon and name, the browsers on it and how many sessions it holds, where and when it was last seen and its address in mono. A Dropdown Menu on each tile renames the device in place or removes it; the device in use is badged This device and has no Remove. Removing asks in an Alert Dialog that says how many sessions end, and the header's ghost Button asks once for every other device. A line at the foot says what happened and Undo brings the last devices back; when no other device is left an Empty state fills the space and the panel keeps its height. It's built from Dropdown Menu, Alert Dialog, Input, Badge, Empty, Button and Guides, with a CSS entrance only. For the security page of any app where one account signs in from several devices.
FAQ
How do I list my own devices?
Edit DEVICES. Each has an id, a name, a kind that picks the icon (laptop, desktop, phone, tablet or display), a group (computer, mobile or other), the browsers on it, how many sessions it holds, a city, a documentation ip, the ISO day it was seen and a current flag for the one in use. The group counts, the "Seen yesterday" wording (worked out from the typed AS_OF day, never the clock), the sessions in the dialog and the filler cells that finish each grid's last row are all derived, so nothing is typed twice. Add a group to GROUPS and it appears.
What stays local, and how do I make Remove real?
Everything: removing takes the tile out of this page's state and the status line says "removed in this demo"; renaming changes the shown name only; Undo brings a device back, which a real server can't do. To make it real, call your endpoint from confirm (revoke the device's sessions and its remembered state), remove the tile only when it answers, and show a failure in the same status line. Send the new name from saveName the same way.
What does the removal dialog guard against?
It is an alert dialog, so clicking outside doesn't close it, focus starts on Cancel and Escape closes it. It says how many sessions end ("This ends its 2 sessions") and that the device will ask for a code the next time it signs in; the all-devices version lists the devices and counts every session. The confirm button is the destructive one, so there is no second colored button. After you confirm, focus moves to the next tile's menu; after Cancel it returns to the menu you opened.
How does renaming work from the keyboard?
Choosing Rename in a tile's menu turns its name into a text field with focus in it, with a Save and a Cancel button where the menu was. Enter saves, Escape cancels, and an empty name is refused with a line that says so, keeping the field open. Saving or cancelling returns focus to the tile's menu button. The tile keeps its height all the while.
How does it look on a phone?
The tiles are one across, each with its menu button at the end of the first line, so the whole panel is a single column of cards under their group labels. The foot with the status line and Undo stays pinned to the bottom of the screen while you scroll, so the result of a removal is always in view; from the medium breakpoint it is simply the last band. The panel's height doesn't change as devices go.
Is it accessible?
Each group is a labelled list and each tile a list item; the menu button is named for its device ("Actions for Phone"), the badge says "This device" in words, and the status line is a polite live region present from the start. The menu opens with Enter, Space or the arrow keys and Escape closes it. Addresses read start to end in any language, and the names, places and counts keep their order in a right-to-left page. On React Aria the menu and the dialog follow its modal behaviour, so Escape closes the menu before anything else.