React Awards Block Flip Cards

Showcase your achievements with interactive flip cards using this awards component for Next.js landing pages. Each card displays the award name on the front face and flips to reveal the awarding organization, year, category, and a brief description on hover or tap. Built with CSS 3D perspective transforms, Tailwind CSS, and Lucide icons. The flip interaction creates a memorable, tactile experience that encourages exploration—visitors naturally want to flip every card. Touch-friendly with click-to-flip for mobile devices. Perfect for SaaS about pages, agency portfolios, startup landing pages, and anywhere you want awards to feel interactive rather than static.

React Awards Block Flip Cards preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/awards-flip.json

npx shadcn@latest add https://www.shadcn.io/r/awards-flip.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/awards-flip.json

bunx shadcn@latest add https://www.shadcn.io/r/awards-flip.json

Related Components

FAQ