API Keys Page React block for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Pro item: the CLI needs a Pro account. See plans

Usage

Import ApiKeysPage from @/components/blocks/api-keys-page.

"use client"

import { ApiKeysPage } from "@/components/blocks/api-keys-page"
import type { ApiKey } from "@/components/blocks/api-keys-page-data"

export function DeveloperKeys({ keys }: { keys: ApiKey[] }) {
  return (
    <ApiKeysPage
      defaultKeys={keys}
      docsHref="https://docs.acme.com/api"
      maxKeys={10}
      onCreate={async (input) => {
        const res = await fetch("/api/keys", { method: "POST", body: JSON.stringify(input) })
        if (!res.ok) throw new Error("The key was not created. Try again.")
        return res.json() as Promise<{ key: ApiKey; secret: string }>
      }}
      onRoll={async (id) => {
        const res = await fetch(`/api/keys/${id}/roll`, { method: "POST" })
        return res.json() as Promise<{ secret: string }>
      }}
      onRevoke={(id) => fetch(`/api/keys/${id}`, { method: "DELETE" })}
    />
  )
}

Props

• titledefault "API keys"
  ReactNode

  The page title.

• descriptiondefault "Use these keys to call the API from your servers. Never share them in client code."
  ReactNode

  The line under the title.

• docsHrefdefault ""
  string

  Adds an API docs link to the header. Empty hides it.

• keys
  ApiKey[]

  Controlled list: { id, name, prefix, createdAt, lastUsedAt?, expiresAt?, scopes, createdBy?, status: "active" | "expired" | "revoked" }. Pair it with onKeysChange.

• defaultKeysdefault "API_KEYS_SAMPLE"
  ApiKey[]

  Starting list while uncontrolled. The sample has an active key, one expiring in 5 days, an expired and a revoked one.

• onKeysChange
  (keys: ApiKey[]) => void

  The list after a create, roll, rename or revoke.

• scopesdefault "DEFAULT_API_KEY_SCOPES"
  ApiKeyScope[]

  The scope options { value, label, description? }: checkboxes in the create dialog and badges in the list. Default Read, Write and Admin.

• expiryOptionsdefault "DEFAULT_API_KEY_EXPIRY_OPTIONS"
  ApiKeyExpiryOption[]

  The expiry choices { value, label, days } where days null means never. Default 30 days, 90 days, 1 year and Never.

• labels
  Partial<ApiKeysPageLabels>

  Merged over DEFAULT_API_KEYS_PAGE_LABELS: every string of the page, the dialogs and the toasts.

• defaultExpirydefault "90d"
  string

  The expiry preselected in the create dialog.

• maxKeysdefault 0
  number

  Active keys allowed. At the limit Create key turns off and an info hint explains it. 0 means no limit.

• warnDaysdefault 7
  number

  An active key expiring within this many days shows an amber "Expires in ...".

• onCreate
  (input: { name, scopes, expiresIn, renews? }) => Promise<{ key: ApiKey; secret: string }>

  Create the key on your server and return it with its secret, which the dialog shows once. renews is the id of the expired key a Renew replaces. A rejection keeps the form and shows its message. Without it the page makes a local sample key so the flow can be tried.

• onRevoke
  (id: string) => void | Promise<unknown>

  Revoke was confirmed. The row turns Revoked once it resolves; a rejection shows in the confirmation.

• onRoll
  (id: string) => Promise<{ secret: string }>

  Adds Roll key to active rows: after a confirmation the new secret is revealed once, like a new key.

• onRename
  (id: string, name: string) => void | Promise<unknown>

  Adds Rename to the row menu, with a small dialog.

• defaultCreateOpendefault false
  boolean

  Opens the create dialog on mount, e.g. from an onboarding link.

• now
  Date | number

  The reference time for last used and expiry warnings; default the live clock (dates show until it hydrates).

• localedefault ""
  string

  Intl locale for dates and relative times. Empty falls back to the UIProvider locale, then en-US (the demo offers en-GB and de-DE).

• className
  string

  Classes for the root, a centered column up to 1152px wide. Other div props go to the root too.

• classNames
  Partial<Record<ApiKeysPageSlot, string>>

  Classes for header, limit, table, empty, dialog and reveal.

Parts

FAQ

More React blocks