aadilghani1

API Key Vault

Component 5

About

An animated isometric illustration of an API key vault: pressing rotate flies the old key card out, drops a new one into the slot, latches the catch, and revokes the old key on its screen readout.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds API Key Vault to your project and fits it to your theme.

Code

How API Key Vault is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import ApiKeyVault from "@/components/ui/api-key-vault";

export default function ApiKeyVaultDemo() {
  return (
    <div className="w-full min-h-screen flex items-center justify-center bg-[#f1f1ef] p-10">
      <div className="w-full max-w-lg aspect-[1.3]">
        <ApiKeyVault />
      </div>
    </div>
  );
}

Dependencies

More by aadilghani1

View all
  • Security Key

    Security Key

    41
  • Deploy Pipeline

    Deploy Pipeline

    36
  • Webhook Relay

    Webhook Relay

    24
  • Usage Meter

    Usage Meter

    20
  • Checkout Till

    Checkout Till

    13
  • Vault Door

    Vault Door

    13
  • Desk Globe

    Desk Globe

    12
  • Firewall Rack

    Firewall Rack

    11