API Key Manager

Dashboards 23

About

A responsive API key management panel with masked credentials, scopes, inline revocation, and a secure one-time secret reveal flow.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds API Key Manager to your project and fits it to your theme.

Code

How API Key Manager is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { useEffect, useRef } from "react";
import { ApiKeys, type ApiKey } from "@/components/ui/api-key-manager";

export default function ApiKeysDemo() {
  const rootRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const timer = window.setTimeout(() => rootRef.current?.querySelector<HTMLButtonElement>("[data-slot='create-api-key']")?.click(), 900);
    return () => window.clearTimeout(timer);
  }, []);

  const createKey = (): { key: ApiKey; secret: string } => {
    const secret = "sk_live_79a45ffbd63c422e9ba3e754";
    return {
      secret,
      key: { id: "demo", name: "New secret key", key: "sk_live_••••••••e754", created: "Sep 12, 2026", lastUsed: "Never", scopes: ["read", "write"] },
    };
  };

  return (
    <main ref={rootRef} className="min-h-screen overflow-x-hidden bg-[#f8f8f7] px-4 py-16 text-zinc-900 sm:px-6 sm:py-24 dark:bg-[#09090b] dark:text-zinc-100">
      <div className="mx-auto max-w-[920px]">
        <div className="mb-4 px-0.5">
          <p className="text-[10.5px] text-zinc-400">Workspace settings <span className="px-1 text-zinc-300 dark:text-zinc-700">/</span> Developer</p>
        </div>
        <ApiKeys onCreate={createKey} />
      </div>
    </main>
  );
}