Developer Components

1 production-ready component for building developer portals with API key management.

Components

ApiKeysCard

List and manage API keys with full create, revoke, and copy functionality.

import { ApiKeysCard } from '@bettercone/ui';
<ApiKeysCard authClient={authClient} />

Features: View keys, create new, revoke, copy to clipboard, last used tracking

Included Sub-components

• CreateApiKeyDialog - Modal to create new API key with name, expiration, and scopes
• ApiKeyCell - Individual API key item displaying name, masked key, created date, and last used

Quick Start

// Developer portal page
import { ApiKeysCard } from '@bettercone/ui';
import { authClient } from '@/lib/auth-client';

export default function DeveloperPage() {
  return (
    <div className="max-w-4xl mx-auto space-y-8">
      <div>
        <h1>API Keys</h1>
        <p className="text-muted-foreground">
          Manage API keys for programmatic access
        </p>
      </div>
      
      <ApiKeysCard authClient={authClient} />
    </div>
  );
}

Features

• ✅ Create API keys
• ✅ Set expiration dates
• ✅ Copy keys to clipboard
• ✅ Revoke keys
• ✅ Last used tracking
• ✅ Masked key display

Props Reference

Related

• Organization Components - Team management
• Account Components - Account settings