KQ-693 · DEVICE/TRUST
Device Trust
A card for one signed-in device with a single control that grants or revokes trust. Approval stamps a round seal onto the card on recoil, the two bounces of a stamp on paper, with an impact ring spreading from under it and its tick drawing on flick. Hovering or focusing Revoke lifts the seal's edge on glide so the peel is previewed, and revoking peels it away: the seal rotates off its left edge on the exit ease with perspective and fades, with no bounce on the way out. The button is the only control, busy while the host is pending, and trust changes are announced once.
KQ-693 · DEVICE/TRUST
Coldbrook Bank · this device
Fieldline Air 13Fieldline OS 4 · Basin CityLast seen just now
Asks for a code every time
untrusted · asks every time
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/device-trust
Props
- trusted / defaultTrusted
- boolean
- default false
- Controlled or initial trust.
- onTrustedChange
- (trusted: boolean) => void
- default —
- Fires from the Revoke press with false; granting goes through onTrust.
- onTrust
- () => void
- default —
- Fires from the Trust press; the host approves and sets trusted.
- pending
- boolean
- default false
- The host is approving: the button turns its ring and is aria-busy.
- device
- DeviceTrustDevice
- default —
- { name, platform, location, lastSeen, kind: "laptop" | "phone" }; lastSeen is a static string.
- days
- number
- default 30
- How long a trusted device is remembered; printed in the footer line.
- label
- React.ReactNode
- default —
- Visible heading; omit it and pass aria-label.
| Prop | Type | Default | Description |
|---|---|---|---|
| trusted / defaultTrusted | boolean | false | Controlled or initial trust. |
| onTrustedChange | (trusted: boolean) => void | — | Fires from the Revoke press with false; granting goes through onTrust. |
| onTrust | () => void | — | Fires from the Trust press; the host approves and sets trusted. |
| pending | boolean | false | The host is approving: the button turns its ring and is aria-busy. |
| device | DeviceTrustDevice | — | { name, platform, location, lastSeen, kind: "laptop" | "phone" }; lastSeen is a static string. |
| days | number | 30 | How long a trusted device is remembered; printed in the footer line. |
| label | React.ReactNode | — | Visible heading; omit it and pass aria-label. |