Make your AI a shadcn expert

Settings API Keys

Animated React API key management settings page for Next.js with create, revoke, scopes, last-used timestamps, and masked key values built with shadcn/ui, Tailwind CSS, and framer-motion

Scroll to load preview

Manage API keys with this React and Next.js settings block. Create new keys with custom scopes, view masked values with one-click copy, see last-used timestamps and expiry dates, and revoke keys instantly. Built with TypeScript, shadcn/ui Input, Button, Badge, and Select, Tailwind CSS, and framer-motion.

FAQ

Last updated on March 17, 2026

Was this page helpful?

Sign in to leave feedback.