4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T4fb5,"use client"; import { Alert02Icon, Building01Icon, Copy01Icon, Delete02Icon, Key01Icon, PlusSignIcon, Tick02Icon, } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { useEffect, useRef, useState } from "react"; import type { ComponentProps, FormEvent, ReactNode } from "react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Skeleton } from "@/components/ui/skeleton"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; const COPY_FLASH_MS = 1500; /** Where the key lives: a personal account key or an organization key. */ export type ApiKeyScope = "personal" | "organization"; export interface ApiKey { id: string; name: string; scope: ApiKeyScope; /** Preformatted creation date, e.g. "Jul 12, 2026". */ createdAt: string; /** Preformatted last use, e.g. "2h ago". Omit for a never-used key. */ lastUsedAt?: string; } const SCOPE_ICON = { organization: Building01Icon, personal: Key01Icon, } as const; const SCOPE_SUBLABEL: Record = { organization: "Organization", personal: "Personal", }; const SCOPES: { value: ApiKeyScope; label: string }[] = [ { label: "personal", value: "personal" }, { label: "org", value: "organization" }, ]; /* ───────────────────────────────────────────────────────── * A copy that carries the real token and flashes a primary * check, announcing through a polite live region. The * "Copied" note masks the value under a gradient so the row * never breaks. * ───────────────────────────────────────────────────────── */ const CopyButton = ({ value, label }: { value: string; label: string }) => { const [copied, setCopied] = useState(false); const copy = async () => { setCopied(true); window.setTimeout(() => setCopied(false), COPY_FLASH_MS); try { await navigator.clipboard.writeText(value); } catch { // Clipboard unavailable (blur, permissions); the feedback still shows. } }; return (

} /> {label} {copied ? `${label} copied` : ""}

); }; const ScopeToggle = ({ scope, onSelect, }: { scope: ApiKeyScope; onSelect: (scope: ApiKeyScope) => void; }) => (

Key scope {SCOPES.map((entry) => ( ))}

); type ScopeFilterValue = ApiKeyScope | "all"; const ScopeFilter = ({ value, onChange, }: { value: ScopeFilterValue; onChange: (value: ScopeFilterValue) => void; }) => ( ); /* The one-time reveal: the full token, a copy, and a warning that it * will never be shown again. Recessed well so it reads as a secret. */ const RevealOncePanel = ({ name, secret, onDone, }: { name: string; secret: string; onDone: () => void; }) => (

{name} created


        {secret}

Copy it now. You will not see this key again.

); const CreateForm = ({ pending, onSubmit, onCancel, }: { pending: boolean; onSubmit: (name: string, scope: ApiKeyScope) => void; onCancel: () => void; }) => { const [name, setName] = useState(""); const [scope, setScope] = useState("personal"); const submit = (event: FormEvent) => { event.preventDefault(); if (name.trim()) { onSubmit(name.trim(), scope); } }; return (

setName(event.target.value)} placeholder="Key name" value={name} /> ); }; const HOLD_MS = 1000; const RELEASE_MS = 180; /* Hold-to-confirm: a destructive fill sweeps left to right for HOLD_MS * (linear, it is progress), revealing a white copy of the label under the * same clip-path. Releasing early rewinds it. Pointer and keyboard both work. * Same grammar as the confirm-dialog. */ const HoldButton = ({ label, onHold, }: { label: string; onHold: () => void; }) => { const [holding, setHolding] = useState(false); const timerRef = useRef(0); const cancel = () => { window.clearTimeout(timerRef.current); setHolding(false); }; const start = () => { setHolding(true); timerRef.current = window.setTimeout(() => { setHolding(false); onHold(); }, HOLD_MS); }; useEffect(() => () => window.clearTimeout(timerRef.current), []); return ( ); }; const KeyRow = ({ apiKey, revoking, onAskRevoke, onCancelRevoke, onRevoke, }: { apiKey: ApiKey; revoking: boolean; onAskRevoke: () => void; onCancelRevoke: () => void; onRevoke: () => void; }) => (

{apiKey.name}

{SCOPE_SUBLABEL[apiKey.scope]}

{`created ${apiKey.createdAt}`}

{apiKey.lastUsedAt ? `used ${apiKey.lastUsedAt}` : "never used"}

} /> Revoke

{revoking ? (

) : null}

); export type ApiKeyListProps = Omit< ComponentProps<"div">, "children" | "onChange" > & { /** The keys to list, in display order. */ keys: ApiKey[]; /** * Create a key of the chosen scope; return the full token to reveal once. * The create UI hides when omitted. */ onCreate?: (name: string, scope: ApiKeyScope) => Promise | string; /** Revoke a key. Receives the whole key so the scope is known. */ onRevoke?: (key: ApiKey) => Promise | void; /** Card title. */ label?: string; isLoading?: boolean; error?: Error | string | null; }; const cardClassName = "flex w-full min-w-0 flex-col rounded-lg border border-border/60 bg-card p-4 shadow-none ring-0"; const Header = ({ label, actions, }: { label: string; actions?: ComponentProps<"div">["children"]; }) => (

{label}

{actions ? (

{actions}

) : null}

); const emptyMessage = (total: number, filter: ScopeFilterValue) => { if (total === 0) { return "No API keys yet."; } return `No ${filter === "organization" ? "organization" : "personal"} keys.`; }; const HeaderActions = ({ showFilter, filter, onFilter, showCreate, onCreate, }: { showFilter: boolean; filter: ScopeFilterValue; onFilter: (value: ScopeFilterValue) => void; showCreate: boolean; onCreate: () => void; }) => ( <> {showFilter ? : null} {showCreate ? ( ) : null} ); /** * Animate the body's height as it changes (create form opens, the reveal * panel appears, rows are added or revoked), so the card grows and shrinks * smoothly instead of jumping. */ const AnimatedHeight = ({ children }: { children: ReactNode }) => { const innerRef = useRef(null); const lastRef = useRef(null); const [height, setHeight] = useState(); const [animating, setAnimating] = useState(false); useEffect(() => { const inner = innerRef.current; if (!inner) { return; } const observer = new ResizeObserver(() => { const next = inner.offsetHeight; if (lastRef.current !== null && lastRef.current !== next) { setAnimating(true); } lastRef.current = next; setHeight(next); }); observer.observe(inner); lastRef.current = inner.offsetHeight; setHeight(inner.offsetHeight); return () => observer.disconnect(); }, []); return (

setAnimating(false)} style={{ height }} >

{children}

); }; const EmptyState = ({ message, showHint, }: { message: string; showHint: boolean; }) => (

{message}

{showHint ? (

Create one to call the Neon API.

) : null}

); export const ApiKeyList = ({ keys, onCreate, onRevoke, label = "API keys", isLoading = false, error = null, className, ...props }: ApiKeyListProps) => { const [creating, setCreating] = useState(false); const [pending, setPending] = useState(false); const [created, setCreated] = useState<{ name: string; secret: string }>(); const [revokingId, setRevokingId] = useState(); const [filter, setFilter] = useState("all"); const handleCreate = async (name: string, scope: ApiKeyScope) => { if (!onCreate) { return; } setPending(true); try { const secret = await onCreate(name, scope); setCreated({ name, secret }); setCreating(false); } finally { setPending(false); } }; const handleRevoke = async (key: ApiKey) => { setRevokingId(undefined); await onRevoke?.(key); }; if (isLoading) { return (

); } if (error) { const message = typeof error === "string" ? error : error.message; return (

error {message}

); } const hasOrg = keys.some((key) => key.scope === "organization"); const hasPersonal = keys.some((key) => key.scope === "personal"); const showFilter = hasOrg && hasPersonal; const filtered = filter === "all" ? keys : keys.filter((key) => key.scope === filter); const showCreateButton = Boolean(onCreate) && !(creating || created); const showEmpty = filtered.length === 0 && !(creating || created); return (

setCreating(true)} onFilter={setFilter} showCreate={showCreateButton} showFilter={showFilter} /> } label={label} />

{creating ? ( setCreating(false)} onSubmit={handleCreate} pending={pending} /> ) : null} {created ? ( setCreated(undefined)} secret={created.secret} /> ) : null} {filtered.length > 0 ? (

setRevokingId(apiKey.id)} onCancelRevoke={() => setRevokingId(undefined)} onRevoke={() => handleRevoke(apiKey)} revoking={revokingId === apiKey.id} /> ))}

) : null} {showEmpty ? ( ) : null}

); }; 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","@hugeicons/react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Freact","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@hugeicons/react"}]]}]}],["$","li","@hugeicons/core-free-icons",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@hugeicons/core-free-icons"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":["utils","https://ui.neon.com/r/button.json","https://ui.neon.com/r/input.json","https://ui.neon.com/r/tooltip.json","https://ui.neon.com/r/skeleton.json","https://ui.neon.com/r/neon-tokens.json","https://ui.neon.com/r/select.json"]}]]}],["$","$L4f",null,{"sourceUrl":"https://ui.neon.com/r/api-key-list.json","proxyUrl":"https://shadcnregistry.com/r/neon-ui/api-key-list","itemId":"@neon-ui/api-key-list"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"src/components/api-key-list/api-key-list.tsx","content":"$51","type":"registry:component"}]}]]}],"$L52"]}]

ApiKeyList

Installation

Files

components

Styles