A responsive API key management panel with masked credentials, scopes, inline revocation, and a secure one-time secret reveal flow.
"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>
);
}