Wishlist Drawer React component
A product grid with heart buttons that burst when saved, a Wishlist pill with a springy count, and a slide-in drawer listing saved items with variant, sale savings and stock, Move to cart, Notify me for sold-out items, a Share link button, a price drop alert switch and Move all to cart.
About the Wishlist Drawer component
Wishlist Drawer lets shoppers save products with a heart and come back to them without leaving the page. Saving gives instant feedback with a small burst and a count on the Wishlist button.
The drawer lists everything saved with the variant, current price, savings and stock, so it doubles as a shortlist. Items move to the cart one by one or all at once, sold-out items offer a restock alert, and the list can be shared with a link.
When to use it
Use it in stores where people compare and come back later, such as fashion, furniture, gifts or electronics, and for gift lists that friends can open from a shared link.
If most purchases are quick, low-price repeat buys, a wishlist adds a step; a reorder or recently viewed list fits better.
Installation
Add the Wishlist Drawer component to your project with the shadcn CLI. It lands in components/wishlist-drawer.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/wishlist-drawerOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeCollections
Use-case pages that compare Wishlist Drawer with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Wishlist Drawer FAQ
- Where are saved items stored?
- The block keeps the saved ids in state and reports every change through onChange. Persist them in localStorage for guests and in the customer account for signed-in shoppers, then pass them back as defaultSaved.
- What happens to sold-out items?
- They stay in the wishlist with a grey photo and an Out of stock label, and Move to cart is replaced by Notify me. Move all to cart skips them and the button says how many items will move.
- How does sharing work?
- Share copies shareUrl to the clipboard and confirms with Link copied. If the browser blocks clipboard access, the confirmation still shows, so make sure the link is also visible on the shared wishlist page.
- Can I use the drawer as a full-screen overlay?
- The drawer is positioned inside the section so it works in previews. For a site-wide wishlist, render the same aside in a portal with position: fixed and lock body scroll while it is open.
- Is it accessible?
- Heart buttons are toggle buttons with aria-pressed and the product name, the drawer is a labelled modal dialog with focus moved to close and returned to the Wishlist button, the page behind is inert and the alert toggle is a switch.
