shadcn.io is not affiliated with official shadcn/ui
Price Match Storefront Block for React
A price-match check for an electronics shop: three rule switches, the other shop's price, a verdict that names the first failing rule or the refund up to $50, and a claim button that stays disabled until eligible.
Installation
Overview
Let shoppers check a price-match claim before they make it, with this price-match panel for React with Base UI. A header names Hobby & Hawk and the Tern Mini drone you paid $349 for. A hairline frame with a plus mark on each corner holds three bands. The first has the shop's three rules as Switches: it is the same item, it is in stock at the other shop, and you bought it within 14 days. The second takes the other shop's price in an Input and shows the difference. The third is the verdict, worked out on every change: the first rule that fails, or that their price is not lower, or that you are eligible for the difference up to $50, with the refund as a figure. The claim Shine Button is disabled until you are eligible, and the reason is the verdict beside it. Pressing it only notes the claim in the page. It's built from Switch, Input, Field, Badge, Guides and Shine Button, with a CSS entrance only. For an electronics shop, an appliance page or any store with a price promise.
FAQ
How do I change the rules?
Edit RULES for the switches (each has a title, a hint and the sentence shown when it fails), PAID for the price paid in cents and CAP for the most a claim refunds. The verdict is a small function, verdictOf, so a new rule is one more entry and nothing else.
How is the verdict worked out?
In order: the first rule that is off, then a missing or invalid price, then a price that is not lower than yours, and last the refund, which is the difference or the cap, whichever is smaller. The same function feeds the badge, the sentence, the figure and the button.
What stays local, and how do I wire it to a real claim?
Everything. The claim button only says that a claim was noted in the page and that nothing was refunded. To wire it, send the order number, the competitor's price and a link or screenshot of their listing to your support system in the claim handler, and let a person confirm the rules.
Why is the button not just disabled?
It is marked as disabled for assistive technology but stays focusable and describes its reason, so a keyboard or screen reader user hears why a claim is not possible. Pressing it while not eligible repeats the reason in the status line.