API KeysProv1.0.0
A workspace's API keys, and making a new one. Create key unfolds a short form in place; the new secret is shown exactly once with a copy button and a plain warning, then only its last four characters remain. Revoking asks for a second press in place.
pnpm dlx shadcn@latest add @beautiful-ui-pro/lumen-api-keysNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import * as React from "react";
import { ApiKeys, type ApiKey } from "@/components/ui/lumen/blocks/api-keys";
export function DeveloperSettings({ initial }: { initial: ApiKey[] }) {
const [keys, setKeys] = React.useState(initial);
return (
<ApiKeys
keys={keys}
onCreate={async (input) => {
const res = await fetch("/api/keys", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(input) });
if (!res.ok) throw new Error("Couldn't create the key. Try again.");
const made: { key: ApiKey; secret: string } = await res.json();
setKeys((k) => [made.key, ...k]);
return made;
}}
onRevoke={async (key) => {
const res = await fetch(`/api/keys/${key.id}`, { method: "DELETE" });
if (!res.ok) throw new Error("Couldn't revoke it");
setKeys((k) => k.filter((x) => x.id !== key.id));
}}
/>
);
}Props
keys–ApiKey[]ApiKey = { id, name, last4, prefix?, scope?, created, lastUsed?, expires? }. Dates come already worded. Never pass secrets here.
onCreate–(input: { name, scope, expiry }) => Promise<{ key, secret }>Make the key on your server; resolve with the new key and its secret (shown once). Throw to show an error in the form.
onRevoke–(key) => unknownRevoke it. Return a promise to show progress; throw to show the error.
scopes / expiries–{ value, label }[] / { value, label }[]The access and expiry choices. Defaults: read only, read and write; 30 days, 90 days, a year, never.
labels–Partial<ApiKeysLabels>Every word, for i18n.
Source
components/ui/lumen/blocks/api-keys.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
