Travel DeckA swipeable deck of destination cards.

Add to your project

One command adds this component to your project.

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 Travel Deck

Travel Deck is a swipeable stack of destination cards: flick the front card with a downward drag and it flings off-screen to reveal the next one behind it. As each card comes forward it animates a hotel-count badge that counts up to its destination total. Motion handles both the drag tracking and the fling-away exit of dismissed cards. It is a strong choice for image galleries, travel marketing pages, portfolio sliders, and product showcases that benefit from a tactile, deck-of-cards interaction.

Built with

Frequently asked questions

Is Travel Deck free to use?

Yes. Travel 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 Travel Deck?

One command: npx shadcn@latest add https://aicanvas.me/r/traveldeck.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Travel 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 Travel Deck built with?

Travel Deck is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.

Where would I use Travel Deck?

Common uses include Image gallery, Portfolio, and E-commerce. Like every AI Canvas component, it is self-contained and drops into any React project.

Can I remix Travel Deck with AI?

Yes. Travel Deck ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.

Featured in collections