Skip to content

shadcn.io is an independent project built on shadcn/ui

Pro

Recently Viewed Product Card Block for Vue

A narrow history of five haberdashery items grouped by day, each row with a drawing, price, Viewed date, Add and Remove, plus Clear history, Restore and an empty state that holds the same height.

UI library: Ark UI

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let shoppers pick up where they left off with this recently viewed product card for Vue with Ark UI. A narrow hairline frame with a plus mark on each corner lists five viewed items under "8 Oct" and "6 Oct" sub-heads, built from typed dates. Each row has a small drawn picture, the name, the price, "Viewed 8 Oct", a ghost "Add" and a named Remove button. The heading row counts "5 of 5" and the "Bag". "Clear history" empties the list into an Empty state that holds the same height as the list, and "Restore" brings every row back in its order. Add turns into "Added" and pressing it again takes the item out, and a polite status line says what changed. Nothing is stored or bought. Guides rule the bands. For account pages and sidebars that want a vertical history instead of a strip.

FAQ

How do I change the history?

Edit ITEMS, newest first. Each has an id, a name, the price in cents, an alt sentence, the shapes that draw it and the viewed day as an ISO date. The sub-heads are worked out from neighbouring dates by rowsOf, and dayText writes "8 Oct" from the ISO string, so the dates are the same on every device.

What happens when the list is empty?

The rows hide and an empty state takes their place inside the same box, so the panel keeps its height. Restore returns every row in order. Removing one row at a time also works, and Restore brings those back too.

Where does focus go after a Remove?

To the "Viewed lately" heading, which can be focused but is not in the tab order, so the next Tab lands on the first row that is left. The removed row is announced by the polite status line.

What stays local, and how do I wire it for real?

The history, the removals and the bag are page state; nothing is stored, charged or sent. Replace drop, clear and restore with calls to wherever you keep the history, and load ITEMS from it. The pictures are typed shapes: swap Picture for an img.

How does it look on a phone?

The same list in one column: a small picture, a name that clamps to one line, the price and date under it, and Add and Remove at the end. Rows keep a fixed height, so nothing wraps into a taller row.

Is it accessible?

The list is a real list with a heading per day, and each date is a time element. Add and Remove name the item they act on, the Add button says when pressing it again undoes it, and the disabled-looking Clear history and Restore buttons stay focusable and answer in the status line.

All 100 product cards blocks