# Move-to-Cart Wishlist block

> Wishlist Grid With Stock and Price-Drop Signal Badges and Tab Filters

Saved-items wishlist grid where each card shows a stock or price signal badge, Move To Cart or Notify When Restocked, and hover remove. Line Tabs filter by signal with live counts. ReUI Badge, shadcn Tabs, Button, Item, Empty. For favorites, saved.

- Type: Pro block
- Category: [Wishlist](https://web.dev.reui.io/blocks/ecommerce/wishlist.md)
- Page: https://web.dev.reui.io/blocks/ecommerce/wishlist/wishlist-3
- MCP: `get_block("wishlist-3")`
- 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

Square cards that leave the list on Move To Cart, with amount off and units left badges, a Sale tab and a detail caption

## Agent notes

- Each `WISHLIST_ITEMS` entry holds one `signal` string, and `getSignalConfig` builds the badge from it plus `compareAtPrice`, `unitPrice` and `signalMeta`
- `handleMoveToCart` and `handleMoveAllToCart` only drop items from local state, and out of stock items stay; no cart request is made
- `handleNotify` is an empty no-op, so Notify When Restocked does nothing until you wire your alert API

## When not to use

- A bare tab strip with count badges, with no product cards to buy from: use [Tabs](https://web.dev.reui.io/components/tabs.md) (`get_component("tabs")`)
- Unavailable items that gray out and confirm a restock alert once it is requested: 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-3
```

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