shadcn.io is not affiliated with official shadcn/ui
Wishlist Carousel Block for Radix UI
Eight saved home goods with drawn plates on a hairline track, a heart toggle that takes an item off and puts it back, and a total in whole cents of what is saved and in stock.
Installation
Overview
Keep a shortlist in view without a long page, with this wishlist carousel for React with Radix UI. Hearthlane, a home-goods shop, shows eight saved items three at a time from the large breakpoint, two from medium and one with the next peeking on a phone; Previous and Next always move a whole view. Each cell has a drawn plate, a heart Button that is pressed while the item is saved, the name, the price, the day it was saved and a stock word with a dot weight (In stock, Low stock, Out of stock). Un-saving keeps the cell in place, dims the plate and says so in the line; saving again brings it back. A band above the track reads "Saved 7 of 8" and a total that adds up the saved items that are not out of stock, in whole cents. The ruled bands come from Guides. The shop, the goods and the prices are made up.
FAQ
How do I use my own items?
Edit ITEMS: an id, a name, a kind of drawn plate, a cents price (whole cents), an ISO saved date and a stock of in, low or out. The count, the total and the stock dots are derived from it. With photographs, replace the Drawing with an img.
How does it work with a keyboard?
Tab reaches the controls in the open slide, the dots, Previous and Next. With focus inside the track, the arrow keys move between slides (mirrored in a right-to-left layout) and Home and End jump to the first and last. Previous and Next stay in the tab order at the ends and are marked unavailable instead of disabled. Slides out of view are hidden from the tab order and from screen readers.
What is announced when I use a heart?
The foot is the block's one polite live region. After a heart it reads, for example, "Removed Brass desk lamp"; after a move it goes back to "Items 4–6 of 8". The pressed state of the heart is read too.