# Wishlist Boards block

> Wishlist Collections Grid with 2x2 Cover Mosaic Cards and Filter Tabs

Account wishlist as named boards with 2x2 mosaic cover cards, +N overflow, item count, updated time, Shared badge, hover share/delete. Line Tabs filter All, Recently Updated, Shared, plus a dashed New Collection tile. ReUI Badge, shadcn Tabs, Item.

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

## Best for

Board level browsing with no product rows, each board a 2x2 photo mosaic, plus Shared and Recently Updated tabs

## Agent notes

- `COLLECTIONS` entries store `itemCount` and up to 4 `coverImages` separately, and the +N badge is `itemCount` minus the photos shown
- `handleShare` and `handleCreateCollection` are empty no-ops, so the hover share button and both New Collection controls do nothing
- `handleDelete` removes the board from state on the first click, with no confirmation step and no API call

## When not to use

- A members or records table with tabbed filters and row actions on hover: use [Team Members](https://web.dev.reui.io/blocks/data-grid/base/data-grid-base-6.md) (`get_block("data-grid-base-6")`)
- Individual saved products with a price and an add to cart button on each: use [Restock Alert Wishlist](https://web.dev.reui.io/blocks/ecommerce/wishlist/wishlist-2.md) (`get_block("wishlist-2")`)

## Install

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

## 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.