Astra

Card Swap

A 3D stack of cards that sends the front card to the back on a timer, or when you fling it.

Card Swap, a Astra component

Use Card Swap 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/CardSwap-TS-TW
How to install Astra components

Related components

  • Scroll Stack

    Cards pin and stack as you scroll, settling back into a dimmed deck with smooth, jitter-free motion.

  • Stack

    Pile of cards you can drag, flick or click through, with thrown cards tucking underneath.

  • Bounce Cards

    A fan of photo cards that bounce in, then spread apart and straighten the one you hover.