API Key Manager

Manage API keys with create, copy, and revoke functionality. Features show-once secret display, expiration dates, and status badges.

Preview

States

Loading

Empty

Features

Table layout with Name, Key (masked), Status, Created, Expires columns
Create modal with 2-step flow: form then show secret once
Secret key shown only at creation (most secure)
Copy to clipboard with visual feedback
Colored status badges: Active (green), Expired (yellow), Revoked (red)
Expiration presets: 30d, 60d, 90d, 180d, 365d, or never
Revoke individual keys via dropdown menu
Loading skeleton state
Empty state with call-to-action

Install Summary

This kit will add the following files and dependencies to your project. Download the bundle and extract it into your project root.

Component Files

File	Path
api-key-manager.tsx	components/user-management/api-key-manager/api-key-manager.tsx
api-key-row.tsx	components/user-management/api-key-manager/api-key-row.tsx
create-key-modal.tsx	components/user-management/api-key-manager/create-key-modal.tsx
expiration-select.tsx	components/user-management/api-key-manager/expiration-select.tsx
types.ts	components/user-management/api-key-manager/types.ts
index.ts	components/user-management/api-key-manager/index.ts

Utility Files

File	Path
design-tokens.ts	lib/design-tokens.ts

Dependencies

Install these dependencies before using the component:

Terminal

bash

npx shadcn@latest add button dialog input select

Terminal

bash

npm install @phosphor-icons/react

Installation

Download the complete bundle as a ZIP file, or copy the text bundle to your clipboard:

Component Files

The component consists of the following files:

1. api-key-manager.tsx

api-key-manager.tsx

tsx

"use client";

import { useState } from "react";
import { Key, Plus } from "@phosphor-icons/react";
import { Button } from "@/components/ui/button";

2. api-key-row.tsx

api-key-row.tsx

tsx

"use client";

import { useState } from "react";
import {
  Key,

3. create-key-modal.tsx

create-key-modal.tsx

tsx

"use client";

import { useState } from "react";
import {
  Key,

4. expiration-select.tsx

expiration-select.tsx

tsx

"use client";

import { Check, Clock } from "@phosphor-icons/react";
import {
  DropdownMenu,

5. types.ts

types.ts

tsx

export type ApiKeyStatus = "active" | "expired" | "revoked";
export type ExpirationPreset = "" | "30d" | "60d" | "90d" | "180d" | "365d";

export interface ApiKey {
  id: string;

6. index.ts

index.ts

tsx

export { ApiKeyManager } from "./api-key-manager";
export { ApiKeyRow } from "./api-key-row";
export { CreateKeyModal } from "./create-key-modal";
export { ExpirationSelect as ApiKeyExpirationSelect } from "./expiration-select";
export type {
  ApiKey,
  ApiKeyStatus,
  ApiKeyManagerProps,
  ApiKeyRowProps,
  CreateKeyModalProps,
  CreateKeyResult,
  ExpirationPreset,
} from "./types";

Shared Utilities

This component uses shared utility functions. These are included in the bundle above:

design-tokens.ts

tsx

// Border radius
export const radius = {
  card: "rounded-xl",
  badge: "rounded-full",
  button: "rounded-lg",

Usage

app/settings.tsx

tsx

"use client";

import { useState } from "react";
import { ApiKeyManager, type ApiKey, type CreateKeyResult } from "@/components/user-management";

ApiKeyManager Props

Prop	Type	Default
keys	ApiKey[]	required
onCreateKey	(name: string, expiresAt?: Date) => Promise<CreateKeyResult>	-
onRevokeKey	(keyId: string) => Promise<void>	-
onCopyKey	(keyPreview: string) => void	-
isLoading	boolean	false
className	string	-