A Vaul alternative for a shop's side cart

Vaul's README now says the repo is unmaintained, and shadcn/ui's drawer has moved to Base UI. If your Vaul drawer was a shopping cart, Stack Cart Drawer is a side cart with the cart logic and the add-to-cart motion built in.

Stack Cart Drawer, preview
One payment$3

By buying you agree to the Terms.

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

Use it in Next.js

app/shop/Store.tsx

"use client";
// Before: <Drawer.Root direction="right"><Drawer.Trigger>Cart</Drawer.Trigger><Drawer.Portal> ... </Drawer.Portal></Drawer.Root>
import StackCartDrawer from "@/components/StackCartDrawer";
import type { NorthwindData } from "@/data/northwind";

type Props = { shop: NorthwindData };

export default function Store({ shop }: Props) {
  return (
    <StackCartDrawer
      data={shop}
      autoplayDemo={false}
      onCheckout={async (items, total) => {
        // items: [{ id, qty }]. Price them again on the server; never trust the total from the browser.
        const res = await fetch("/api/checkout", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ items, total }),
        });
        return { ok: res.ok };
      }}
    />
  );
}

Good to know

  • Vaul's README opens with: "This repo is unmaintained. I might come back to it at some point, but not in the near future." Its last npm release is 1.1.2, from December 14, 2024. The repo isn't archived, its peer range includes React 19, and npm counted 21,182,194 downloads in the week to October 22, 2026.
  • When the free option fits better: almost always. shadcn/ui's docs say "The drawer component now uses Base UI instead of Vaul" and include a migration guide (vaul becomes @base-ui/react, direction becomes swipeDirection). @base-ui/react 1.9.0 came out on October 9, 2026, MIT licensed. Bottom sheets, snap points, filter panels and mobile menus all belong there.
  • Stack Cart Drawer isn't a drawer primitive. It's a storefront block: product cards, a cart button in the header, and a drawer from the right with line items, quantity buttons, a free shipping bar and a checkout button. Products fly into the cart as discs and unfold into rows.
  • There's no swipe to close, no snap points and no bottom sheet. It closes on the X, a backdrop tap or Escape. Focus moves into the drawer, stays there while it's open, and goes back to the cart button.
  • It doesn't take payments. onCheckout gets the items and the total, and you call Stripe or your backend. Price the order again on the server.
  • Type-checked against next 15.5, react 19.1 and framer-motion 14.6 with TypeScript 5.9.

What your Vaul drawer maps to

  • Drawer.Root direction="right": the cart always slides in from the right.
  • Drawer.Trigger: the cart button in the header. Its count bumps when something lands.
  • Drawer.Overlay: a blurred backdrop. A tap closes the cart.
  • Drawer.Content and Drawer.Title: the cart panel, a modal dialog labelled "Your cart".
  • open and onOpenChange: no controlled prop. The cart opens from its own button.
  • snapPoints, dismissible, handleOnly and onDrag: no match.
  • Your cart state: built in. data.shop sets the products and the free shipping threshold, and onCheckout gets the items.

Install

  1. Copy from the zipPut react/src/components + react/src/data into src/, then npm i framer-motion (and npm uninstall vaul once nothing else uses it).
  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; pass false in 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.

Questions

Is Vaul deprecated?

Not on npm, and the repo isn't archived. The README says it's unmaintained and the last release is from December 2024. Its peer range still includes React 19.

What does shadcn/ui use now?

Its drawer is built on Base UI's Drawer. The shadcn docs have a migration guide from the Vaul version.

Should I use this instead of Base UI?

Only for a shop's cart. For any other drawer or a mobile bottom sheet, Base UI is the better pick and it's free.

Does it take payments?

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

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.

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.