API Key Manager

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/devtools/devtools14.tsx instead.

Usage

The file also exports devtools14Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Devtools14, devtools14Demo } from "@/components/blocks/devtools/devtools14";

export default function Page() {
  return <Devtools14 {...devtools14Demo} />;
}

Props

Types

type ApiKeyStatus = "active" | "revoked";

type ApiKey = {
  id: string;
  name: string;
  maskedValue: string;
  fullValue: string;
  scopes: string[];
  status: ApiKeyStatus;
};

Behavior notes

• The reveal toggle and the copy button are both genuinely functional ("use client" with real per-row useState keyed by id): clicking the eye icon swaps the masked string for fullValue in place, and clicking the copy icon calls navigator.clipboard.writeText(fullValue).
• There is no backend behind any of this: fullValue is a fixed fake key baked into the demo data, so revealing or copying a key always shows or copies the same static string, and revoked keys can still be revealed/copied since the component has no concept of real authorization.
• Reveal state is local to the page load and per-key (an object keyed by id), so revealing one key does not affect the others, and refreshing the page collapses everything back to masked.
• Status badge color is fixed by status value (active=emerald, revoked=muted) and is not configurable beyond changing status; scope badges always render with the secondary badge variant regardless of scope name.
• The copy button does not await or surface the clipboard promise's result; it fires navigator.clipboard.writeText and does not show a "copied" confirmation state.