shadcn.io is not affiliated with official shadcn/ui
Price History Storefront Block for Vue
A price history for a pair of headphones: a hand-drawn step chart over 30, 60 or 90 days with the high, low and current price, and a target price that draws a line and names the day it would have fired.
Installation
Overview
Show whether a price is a deal, with this price history for Vue with Ark UI. A header names the Meridian headphones from Linnet & Lark and holds a Segment Group for the range: 30, 60 or 90 days. A hairline frame with a plus mark on each corner holds a hand-drawn SVG step chart, a line that only moves on the day the shop changed the price, with the high and low on the axis, a dot for today and the dates under it. A row of three figures gives the lowest price, the highest and the price now, each with its date. The foot takes a target price in an Input: a dashed line marks it on the chart, a sentence says on which day it would first have fired inside the range ("At $199 you would have been alerted on 16 Sep"), and the Shine Button saves the alert in the page only. Every figure is worked out from the typed price changes, and the same data is in a table for a screen reader. It's built from Segment Group, Input, Field, Guides and Shine Button, with a CSS entrance only. For a product page, a watchlist or a deals page.
FAQ
How do I fill it with my prices?
Edit CHANGES: one entry for each day the price changed, with the day number (0 is the first of the 90 days) and the price in cents. The chart, the high, the low, the dates and the alert day are all worked out from them, and the first day is set by FIRST_DAY.
How is the alert day worked out?
It is the first day inside the chosen range when the price was at or below your target. If the price now is already there, the sentence says so; if it was never reached, it says that. Changing the range changes the answer, because it only looks at the days you can see.
What stays local, and how do I wire it to real alerts?
The prices are samples ending on 9 October 2026, and Set price alert only marks the button as done and says that no email will be sent. To wire it, send the product id and the target to your alerts service in the save handler.
Why is the chart drawn by hand?
It is one small SVG path and a few positioned marks, so there is no chart library to load. It sits in a left-to-right box so it does not mirror in right-to-left languages, and a table with the same price changes follows it for screen readers.