Wishlist 7 block design & features
A shadcn/ui wishlist page with a header showing a filled heart, the saved count and a Bag button with a live item count. A narrow left rail lists All saved, Birthday, Home and Autumn with counts, a sort select for recently added, biggest price drop or lowest price, and a Share list button. The main area is a three column grid of saved products, each with a square photo, a filled heart to unsave, a status badge, the name, brand and price, colour swatches, a size select and a full width Move to bag button.
The badges are what make the list useful after saving: a green price drop with the saved price struck through, an amber Only 2 left, Back in stock, or Out of stock with the photo dimmed and a Notify me button that confirms with a check. Moving an item to the bag fades the card out, lets the others glide into place and rolls the bag count up, and unsaving does the same. A small rounded notice then appears below the grid naming the item with an Undo button that restores it. Motion is short and springy and switches off for reduced motion.
The block feels like a real account wishlist, with every saved product carrying its remembered colour and size and its current availability. It needs product photos, prices, saved prices, stock states, colours and sizes per item, plus list names, all passed as props. The list rail sits above the grid on small screens and the grid drops to two columns.