3d Card

Move your mouse and watch the card follow. The card tilts toward your cursor with a perspective shift that makes flat content feel tangible. Elements inside can pop out at different depths on hover—your image lifts while the background stays put. Works smoothly on all devices because it uses CSS transforms under the hood.

3d Card preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/3d-card.json

npx shadcn@latest add https://www.shadcn.io/r/3d-card.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/3d-card.json

bunx shadcn@latest add https://www.shadcn.io/r/3d-card.json

Related Components

FAQ