Astra

Tilted Card

A 3D card that tilts toward the cursor, with glare, a soft shadow, floating layers and a flip side.

Tilted Card, a Astra component

Use Tilted Card in your project

Choose JavaScript or TypeScript and plain CSS or Tailwind. Enable JavaScript for the interactive preview, customization controls and source tabs.

npx shadcn@latest add @react-bits/TiltedCard-TS-TW
How to install Astra components

Related components

  • Profile Card

    A framed profile card that tilts toward the cursor, with holographic foil shining through a tiled pattern.

  • Holo Card

    Collectible trading card with a real holographic foil and glitter that sparkles as it tilts.

  • Model Viewer

    A product-style 3D model viewer that frames itself and floats over a soft shadow.