Product Card DeckA draggable card deck you flick through one card at a time.
Dreamer backpack
Creator graffiti tee
Dreamer high-tops
grab the top card and flick it away
Add to your project
One command adds this component to your project.
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/product-card-deckFor dark mode, add the dark class to your <html> element:
<html class="dark">Install with AI Canvas MCP
With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.
About Product Card Deck
Product Card Deck is a draggable stack of product cards you flick through one at a time, built for browsing a small catalogue the way you swipe a deck of cards. Grab the top card and it leans toward your drag like a real card being thrown, then spins off with momentum in whatever direction you flick it, while the card behind rises into its place and a fresh one slides in at the back so the deck never runs out. Each card pairs a full-bleed product image with a clean caption strip holding the name and a pill call-to-action button with hover and press states. Framer Motion drives the drag, tilt, and fly-off physics while Tailwind covers the surrounding chrome, and it is fully touch-friendly for a mobile-first shoppable gallery. Swap in your own images and labels to turn it into a lookbook, a featured-products carousel, or a swipe-to-shop experience.
Built with
Frequently asked questions
- Is Product Card Deck free to use?
- Yes. Product Card Deck is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.
- How do I install Product Card Deck?
- One command: npx shadcn@latest add https://aicanvas.me/r/product-card-deck.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Product Card Deck for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.
- What is Product Card Deck built with?
- Product Card Deck is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.
- Where would I use Product Card Deck?
- Common uses include Product showcase, E-commerce, and Lookbook. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Product Card Deck with AI?
- Yes. Product Card Deck ships with one comprehensive AI prompt written against the real source code. Open "Remix with AI" on this page to read and copy it into Claude, Cursor, ChatGPT, or any AI tool. Prompts are for remixing your own variation; for the exact component, install it with the one-command CLI.
AI Canvas