shadcn.io is not affiliated with official shadcn/ui
Wishlist Storefront Block for Vue
A shareable wishlist for a homeware shop: six drawn saved pieces with options and stock in words, Add to bag and Remove with Undo on each, a sort, and a Share switch that reveals a copyable link.
Installation
Overview
Let shoppers keep what they like and send it to someone, with this wishlist for Vue with Ark UI. A header names Larch & Lime, a homeware shop, and holds a Toggle Group that sorts the list by Date added, Price or Name, re-ordering on the press. A hairline frame with a plus mark on each corner holds six drawn pieces (a lamp, vase, jug, bowls, stool and clock) in hairline cells, each with its option, its price, stock in words (In stock, Low: 3 left, Back about 24 Nov) and an Add to bag that raises the Bag count in the heading. Remove leaves a dashed "Removed in this demo" cell with Undo in its place, so the grid never shifts, and the "6 saved" count follows; remove them all and an Empty state brings the list back. The foot has a Switch to share the list: while it is on, a typed link appears with a Copy Button that really copies, and while it is off the link's space stays reserved. Nothing is published. It's built from Toggle Group, Switch, Copy Button, Empty, Button and Guides, with a CSS entrance only. For a wishlist page, a saved items section or a gift list.
FAQ
How do I fill it with my own saved items?
Edit SAVED. Each has an id, a name, an option such as "Shade: Stone", the price in cents, the ISO day it was added, units in stock (0 is sold out, three or fewer is low), a restock day for a sold-out piece and the kind of drawing. Counts, stock words and sort orders come from those.
Does sharing publish anything?
No. The switch shows a typed link on a reserved test domain and the status line says nothing is published. Copy puts that link on the clipboard, which is real. To make it work, create a share token on your server when the switch turns on, show the real link, and revoke it when it turns off.
How do Remove and Undo work?
Remove turns the cell into a dashed placeholder with an Undo button and moves focus to it, and the saved count goes down. Undo restores the piece and puts focus on its Add to bag. Nothing is deleted anywhere; connect Remove to your wishlist API and keep the placeholder until the request settles.
Does sorting move the cells?
Yes, on the press of Date added, Price or Name, and only then. Adding to the bag or removing never reorders, so nothing moves under the pointer.
How does it look on a phone?
The grid goes two up with the same hairlines, names clamp to two lines and prices never wrap. The Add to bag button shares its row with an icon-only Remove, and the foot stacks the switch, the link and the status.
Is it accessible?
Each Add to bag and Remove names its piece, the switch is named "Share this list", and the link row is hidden from assistive technology and the keyboard while sharing is off. The status line is a polite live region present from load. The drawings are decorative, and stock is said in words, not colour.