Polaroid StackFive polaroid photo cards stacked in a casual pile — click to fan them out in a spring-animated arc, hover to lift, click a card to spotlight it.
Sunset
Ocean
Dream
Golden
Mist
click to fan out
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/polaroid-stackFor dark mode, add the dark class to your <html> element:
<html class="dark">This component uses Caveat. Add it to your project:
Optional<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700;800&display=swap" rel="stylesheet">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 Polaroid Stack
Polaroid Stack is five photo cards in the casual pile a friend would leave on a desk, slightly rotated, slightly offset. Click the stack and they fan out in a spring-animated arc; hover individual cards to lift them; click a specific card to bring it forward as the focal point. Motion drives the fan-out, the lift, and the spotlight transitions. It is a warm, personal way to display a small photo set — perfect for portfolios, about pages, wedding sites, and product pages where the photo itself is part of the brand.
Built with
Frequently asked questions
- Is Polaroid Stack free to use?
- Yes. Polaroid Stack 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 Polaroid Stack?
- One command: npx shadcn@latest add https://aicanvas.me/r/polaroid-stack.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Polaroid Stack 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 Polaroid Stack built with?
- Polaroid Stack is built with React and TypeScript, using Motion and Tailwind CSS.
- Where would I use Polaroid Stack?
- Common uses include Image gallery, Portfolio, and Wedding site. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Polaroid Stack with AI?
- Yes. Polaroid Stack ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.
AI Canvas