Animated cart drawer for React

Products fly into the cart as discs and unfold into line items.

Get the code · $3React · Tailwind · TypeScript
Stack Cart Drawer, preview

Use it in Next.js

"use client";
import { StackCartDrawer } from "@/components/StackCartDrawer";

export default function Shop() {
  return (
    <StackCartDrawer
      onCheckout={async (items, total) => {
        const res = await fetch("/api/checkout", { method: "POST", body: JSON.stringify({ items, total }) });
        return { ok: res.ok };
      }}
    />
  );
}

Install

  1. Copy from the zipPut react/src/components + react/src/data into src/, then npm i framer-motion.
  2. Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

data
store name, products, free-shipping threshold
onCheckout
your payment call, resolve { ok: true }
autoplayDemo
loops the demo until the first tap

Questions

Does the cart work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Does it take payments?

No. onCheckout hands you the items and total, and you call Stripe or your backend.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.