shadcn.io is not affiliated with official shadcn/ui
Recently Viewed Storefront Block for Radix UI
A browsing trail for a rug shop: six drawn rugs you looked at with the day viewed, a Pin to keep and a Remove on each, Clear unpinned with an Undo, and Previous and Next for the strip.
Installation
Overview
Let shoppers pick up where they left off, with this recently viewed strip for React with Radix UI. A header names Vetch & Vine, a shop for woven rugs, and says what the trail is for. A hairline frame with a plus mark on each corner holds one band: a horizontal strip of six drawn rugs (a stripe runner, a diamond kilim, a check, a border, dots and waves), newest first, each with its price and the day you viewed it. Every tile has a Pin to keep, a pressed toggle that turns solid, and a Remove. Clear unpinned removes the rugs you did not pin and says how many ("4 cleared, 2 kept"); the foot's Undo brings them back in their old order, and a single Remove can be undone too. Previous and Next scroll the strip, which snaps tile by tile, and focus moves to the tile that takes a removed one's place. When everything is gone an Empty state offers to bring the rugs back, and the strip keeps its height. It's built from Button, Empty and Guides, with a CSS entrance only. For a product page, a home page shelf or a returning-visitor strip.
FAQ
How do I fill it with my own trail?
Edit RUGS, newest first. Each has an id, a name, a price in cents (cents), the ISO day it was viewed and a pattern for the drawing. START_PINNED lists the ids pinned when the page opens. In your shop, build the list from the products a visitor opened and store the pins with it.
What does Clear unpinned keep?
Only the pinned rugs. It removes the rest, says how many went and how many stayed, and moves focus to Undo. Undo restores exactly what that press removed, in the original order. If every rug is pinned it says there is nothing to clear.
Is anything saved?
No. The trail, the pins and the last removal live in the page's state and reset on reload. To make it real, write the trail and pins to your account or to local storage when they change, and read them back on load.
How do I move along the strip?
Scroll or swipe it, press Previous or Next, or Tab through the tiles' buttons: the strip scrolls to keep the focused tile in view. It snaps to tiles and scrolls without animation for anyone who asked for less motion.