shadcn.io is not affiliated with official shadcn/ui
Price Monitoring Dashboard Block for Svelte
Nine products by category with your price, the lowest rival and the gap, the picked product's five rival prices on a number line, and a Match lowest button.
Installation
Overview
Watch what rivals charge and decide whether to follow, with this price monitor for Svelte with Ark UI. A Native Select in the header picks Audio, Displays or Input. A hairline frame with a plus mark on each corner holds a start list of that category's three products, each with its SKU, your price, the lowest rival price, the gap in percent and an "Undercut" Badge when a rival is cheaper. The picked product is drawn as a number line: the five rivals' prices as dots, the lowest one filled, each with its latest change as an arrow and an amount, and your price as a labelled diamond. The foot's Shine Button "Match lowest" sets your price to the lowest rival and the gap goes to zero. Trends use an arrow and a number, never a green or red. The prices are typed and the line comes with a text table for screen readers. Below the medium breakpoint the products stack above the line. It's built from Native Select, Badge, Shine Button and Guides, with a hand-built number line. For retailers and pricing analysts.
FAQ
How do I load my own prices?
Edit PRODUCTS. Each has an id, a name, a SKU, a category, your price in cents and five rivals, each with a price and the change since the last check, both in cents. The gap, the Undercut word, the number line and its scale are all worked out from those rows.
How is the gap worked out?
It is your price minus the lowest rival price, as a percentage of the lowest rival price, with a sign and one decimal. A positive gap means you cost more; a rival is cheaper exactly when the gap is above zero, and that is when the word Undercut shows.
What does Match lowest do?
It sets your price for the picked product to the lowest rival price in this page and says so in the status line: "Matched ... in this demo. Nothing was published to your shop." It stays disabled-looking and explains itself when your price is already at or below the lowest.
What stays local, and how do I wire it for real?
The prices are typed and a match lives in component state. To wire it up, load rival prices from a price-checking service you are allowed to use, store each check so the change is computed from the last one, and send a match to your catalogue from a server action with a review step.