Slide DeckSwipeable card deck with four editorial slides.

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

Slide Deck is a four-slide editorial card stack you navigate by drag or by tapping the side arrows. Each slide springs into place with a Motion transition that hands focus to the new card while easing the previous one back. The cards themselves take rich content — image, headline, subhead, footer — so the same component works for an image gallery, a long-form editorial preview, a portfolio carousel, or a multi-step product story.

Built with

Frequently asked questions

Is Slide Deck free to use?

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

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

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

Where would I use Slide Deck?

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

Can I remix Slide Deck with AI?

Yes. Slide 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