API Keys depicts the moment a credential is issued: a user avatar connects to a blinking server rack through rails that carry travelling packets, while a live API key scrambles character by character into an issued chip. Built with Framer Motion and React. The card title and description are props, so it drops straight into auth feature grids, security landing pages, and developer docs.
Installation
Install dependencies.
Copy and paste the following code into your project.
Unlock the full library
Get all pro blocks, components & illustrations, and production-ready Next.js + Tailwind templates.
Update the import paths to match your project setup.
Usage
import ApiKeys from "@/components/pro/blocks/api-keys";<ApiKeys />Props
| Prop | Type | Default | Description |
|---|---|---|---|
cardTitle | string | "API Keys" | Title shown in the card overlay. |
cardDescription | string | "Give every user secure, production-ready API keys." | Description shown in the card overlay. |