shadcn.io is not affiliated with official shadcn/ui
Access Tokens Account Block for Ark UI
Where each API token has been used: a row per token that opens to its last five requests, a line that counts the networks, New network marked in words, a two-step Revoke and a form that makes a token shown once.
Installation
Overview
Show people where their API tokens are being used, with this token activity panel for React with Ark UI. A hairline frame with a plus mark on each corner holds a ruled list with a row per token: its name, a masked id in mono, the scopes it holds in small chips, and when it was last used, made and expires. A Requests button opens the token's last five requests: when, the endpoint in mono, the address and the place. A request from a network the token had never used before carries a "New network" badge with a warning icon, and one line above the list adds it up: "Used from 3 networks; 1 is new." Each row revokes in two steps in place, Revoke and then Confirm or Cancel with Escape cancelling, and a revoked token stays in the list with a Restore button. The header's Shine Button is the only colored control: it opens a form for a new token, with a name Input, four Checkbox scopes and a Native Select for the expiry, and the token it makes is shown once in a read-only field with a Copy Button. The foot says what happened. It's built from Input, Checkbox, Native Select, Copy Button, Badge, Button, Shine Button and Guides, with a CSS entrance and disclosure only. For the developer page of any API product, and a good place to catch a token that has left the building.
FAQ
How do I fill it with my tokens and their requests?
Edit TOKENS. Each has a name, the last four characters as tail, its scopes, the ISO created day and expires day (an empty string for never), the known networks it had been used from, and its uses: the ISO time, the endpoint, the address and the place of each request, newest first. A network is the first three parts of the address with .0/24 after them, so a request is "new" when its network is not in known. The sentence above the list, the badges and the counts are worked out from that data and the one AS_OF constant, never the clock.
What stays local, and how do I make it real?
Everything. Revoking, restoring and making a token change this page's state and say so in the foot; the new token is a random string made in your browser and means nothing to a server. To make it real, call your revoke endpoint in confirm and your create endpoint in make, change the list only when the server answers, and show the secret the server returns in the same read-only field. Never keep a token you showed once: store a hash.
What counts as a new network?
A request whose address belongs to a /24 network the token has not been seen on before. It is marked in words ("New network") and the token's row says how many of its requests came from one, so the signal never depends on colour. It is a prompt to look, not a verdict: a laptop on a hotel network is new too. The count above the list covers only live tokens, so revoking the token that was used from the new network makes the line read "none is new".
How does revoking work?
Pressing Revoke swaps that button, in place, for Confirm and Cancel, and focus moves to Confirm. Cancel sits where Revoke was, so a double click cannot confirm by accident, and Escape cancels while focus is inside the panel and returns focus to Revoke. Confirming marks the row revoked, keeps its requests readable and moves focus to Restore, so a mistake is one press away. Nothing disappears, so the list never changes height.
How is the new token shown?
The header button opens the form with focus in the name field. Making a token needs a name and at least one scope; a problem is written under the form and focus moves to the field. The token appears once in a read-only field with a copy button and the line "Shown once. Copy it now: Ospreydock keeps only a hash." Done hides it for good and closes the form. The new token joins the top of the list with no requests yet.
How does it look on a phone, and is it accessible?
Each row is a card: the name, chips and facts first, then the Requests and Revoke buttons, and the opened requests as short stacked lines (when, endpoint, then address and place). The tokens are a real list, the requests an ordered list under each token's name, the buttons are named for the token ("Revoke Payroll sync") and Requests reports whether it is open. The status line at the foot is a polite live region present from the start, and dates keep their order in a right-to-left page.