Back
Zustand Cart
Reusable shopping cart powered by Zustand with localStorage persistence, product grid, quantity management, price calculations, and wishlist functionality.
Next.jsE-Commerce
What's Included
Zustand Cart State
LocalStorage Persistence
Product Grid Display
Add / Increment / Decrement Items
Remove from Cart
Automatic Price Calculations
Wishlist UI
Installation
terminal
$ pnpm dlx shadcn@latest add https://jb.desishub.com/r/zustand-cart.jsonHow to Use
1
Install the component
Run the shadcn CLI to add the Zustand cart.
pnpm dlx shadcn@latest add https://jb.desishub.com/r/zustand-cart.json2
Set up the cart store
The cart store is automatically created with Zustand and localStorage persistence.
import { useCartStore } from '@/store/cart-store'
// Access cart state anywhere
const { items, addItem, removeItem, total } = useCartStore()3
Use the cart components
Import the product grid and cart components.
import { ProductGrid } from '@/components/cart/product-grid'
import { CartDrawer } from '@/components/cart/cart-drawer'
export default function ShopPage() {
return (
<>
<CartDrawer />
<ProductGrid />
</>
)
}Free
Open source component
Free to use · MIT License
CategoryE-Commerce
PlatformsNext.js
Features7
Resources