Secret Reveal

A token, a one-time link or a recovery code, at the single moment it is visible. Reach for it wherever something is shown that cannot be shown again - after minting an API key, after generating an invitation, after resetting a password - and where the cost of the reader copying nine tenths of it is a support conversation.

Why it is built this way

This was written out five times before it became a component, and the five copies were not identical - which is the actual cost. One of them scrolled horizontally and one wrapped, so one of them showed a token with its tail off the right-hand edge.

So it wraps, always. A document that scrolls loses nothing, because the reader scrolls it. A credential whose end is out of view looks complete and is not.

The second decision is user-select: all, which makes one click take the whole value. The clipboard API only exists in a secure context, so on a laptop over plain http@sushindustries/httpThe five things a server decides about a response before it decides what is in it: canonical origin, cache lifetime, content security policy, embed allowlist, and content negotiation.package the copy button silently never confirms - selecting by hand is the path that always works, and this makes it a single gesture rather than a careful drag.

What it does not do

It does not know the value is secret. Nothing is redacted, obscured or omitted from the DOM; this is a presentation component, and keeping a credential out of logs and out of a second render is the caller's job.

Install

tanstack add https://adamjurek.com/r/tanstack/secret-reveal.json

pnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/secret-reveal.json

pnpm add @sushindustries/ui @sushindustries/atoms

What you get