Framer Motion cart drawer

Products fly into the cart as discs and the drawer unfolds them into line items. React, Tailwind and Framer Motion, ready for Next.js.

By buying you agree to the Terms and ask for instant access, so you lose the 14-day withdrawal right. When we still refundWe'll also email you when a new piece lands (about once a week). Unsubscribe in one click, anytime.

Full product pageReact · Tailwind · TypeScript

Use it in Next.js

app/shop/page.tsx

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

export default function Shop() {
  return (
    <div className="h-dvh">
      <StackCartDrawer
        autoplayDemo={false}
        onCheckout={async (items) => {
          const ok = await placeOrder(items);
          return { ok };
        }}
      />
    </div>
  );
}

app/shop/actions.ts

"use server";

export async function placeOrder(items: { id: string; qty: number }[]) {
  // Price the items here from your own catalogue, then create the order or the payment.
  return items.length > 0;
}

Good to know

Framer Motion gives the cart its clock. useAnimationFrame calls the cart's engine once per frame, and the engine writes the flight, the stack and the unfold straight to the DOM, so a 60 fps flight never re-renders React.
There's no AnimatePresence or layoutId in it. The flight path and the easing are plain functions in engine.ts, so you can change them there.
onCheckout gets the items and the total. Price the order on the server from your own catalogue, not from the total the browser sends.
For a Stripe Checkout redirect, the Stripe cart drawer page below has the server action.
The cart keeps its items in its own state while the page is open. Saving the cart between visits is yours to add.
The demo ships with three products. To load your own catalogue in TypeScript, widen the NorthwindData type in data/northwind.ts first.

Install

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

Props

onCheckout: (items, total), resolve { ok: true }
data: store name, products, free-shipping threshold
autoplayDemo: false for a real shop

How qodesign compares

qodesign vs 21st.dev21st.dev is best for: browsing a huge marketplace and copying many components a month.
qodesign vs Skiper UISkiper UI is best for: unusual interaction details for landing pages: image reveals, cursor trails, tooltips, drag-and-scroll galleries.

All comparisons, with prices read on each library's own site.

From the blog: Slide-Out Cart Drawer in React With Native dialog

From the blog: overscroll-behavior contain: Stop Scroll Stealing in React

Questions

Which framer-motion version does it need?

The package.json asks for framer-motion ^11.11.0. The drawer only uses its useAnimationFrame hook.

Can I import from motion/react instead?

We haven't tested this piece with the motion package yet, so keep the framer-motion import it ships with.

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.