# Collection Rail Wishlist block

> Multi-Collection Wishlist with Cover-Stacked Collection Rail

Saved products in selectable collections: a left rail of cover-stacked tiles with count and total, plus a product pane with brand, price, savings, and bulk add-to-cart. shadcn Breadcrumb, Button, Empty, Item. Wishlist, favorites, lookbook.

- Type: Pro block
- Category: [Wishlist](https://web.dev.reui.io/blocks/ecommerce/wishlist.md)
- Page: https://web.dev.reui.io/blocks/ecommerce/wishlist/wishlist-6
- MCP: `get_block("wishlist-6")`
- Built with: Breadcrumb, Button, Empty, Item
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A two pane layout where a rail of stacked cover tiles picks one collection and the pane adds all its products to cart

## Agent notes

- `WISHLIST_ITEMS` is a record keyed by id and each `WISHLIST_COLLECTIONS` entry lists `itemIds`, so a product in 2 collections is stored once
- `handleAddToCart` and `handleAddAllToCart` only fill `addedToCart`; no cart request is made
- The New Collection button has no `onClick`; wire your create flow to append a collection to the `collections` state via `setCollections`

## When not to use

- Browsing the catalog to save items, with color swatches and a hover heart: use [Swatch Swap Grid](https://web.dev.reui.io/blocks/ecommerce/product-grid/product-grid-1.md) (`get_block("product-grid-1")`)
- A file explorer with a folder tree rail and switchable list or grid views: use [Drive Explorer](https://web.dev.reui.io/blocks/solutions/files/solution-files-1.md) (`get_block("solution-files-1")`)

## Install

```bash
npx shadcn@latest add @reui/wishlist-6
```

## About Wishlist blocks

### When to use

- A saved items page in a shopper account, with prices, savings and add to cart on each product
- Price drop, back in stock and low stock badges that flag which saved products to buy now
- Named collections or priority groups that sort saved products by occasion, recipient or intent to buy

### When not to use

- A dashboard side panel of metrics, transactions or integrations, with nothing to buy: use the [List blocks](https://web.dev.reui.io/blocks/application/list.md)
- A lone price drop or low stock label on a product tile you already render: use [Badge](https://web.dev.reui.io/components/badge.md) (`get_component("badge")`)
- A back office table of records narrowed by field, operator and value chips: use the [Filtering blocks](https://web.dev.reui.io/blocks/data-grid/filtering.md)

### Agent notes

- Every root seeds `useState` with the demo constants in components/data.tsx and saves nothing; load and persist the list through your own wishlist API
- Every Share control is a stub, a button with no `onClick` or the no-op `handleShare`; wire it to your share link or clipboard flow
- Each page.tsx adds a `min-h-svh` wrapper and each root sets its own max width and `h1`; drop the wrapper and keep one `h1` in your storefront layout

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.