Back to components
Commerce component

Zustand Cart

Client-side cart with localStorage persistence and drawer UI.

Read full guideBrowse all components

Install

$ Run in your project root
pnpm dlx shadcn@latest add https://jb.desishub.com/r/zustand-cart.json

What it does

  • Responsive product grid with images, descriptions, pricing
  • Cart state with add/remove/quantity adjustment
  • Floating cart panel with totals and checkout options
  • Auto-persists cart to localStorage
  • Reusable sub-components: ProductCard, ProductListing, Cart

When to use

Use it

E-commerce sites needing client-side cart management with persistent storage. Install BEFORE Stripe UI.

Skip it

Server-side carts requiring real-time inventory sync or cross-device cart sharing.

Prerequisites

  • React/Next.js with Tailwind
  • shadcn/ui Button
  • lucide-react

Files & routes added

  • use-cart-store.ts (Zustand hook)
  • product-card.tsx, product-listing.tsx, cart.tsx
  • zustand-cart.tsx (wrapper)
  • index.ts (barrel export)

Related components

Commerce

Stripe UI

Commerce

DGateway Shop