shadcn.io is not affiliated with official shadcn/ui
Tax Calculator Storefront Block for Radix UI
A shop-wide tax setting for a trade price list: a country, a Show prices with tax switch and a VAT number field over six products priced from a typed net, with a pattern-valid number moving the shop to tax-free.
Installation
Overview
Show a whole price list with or without tax, and make the rule visible, with this trade price list for React with Radix UI. A header names the setting and says what Calder Trade sells. In a hairline frame with a plus mark on each corner, the first band holds a Native Select of four countries with their rates (the United Kingdom 20 percent, Germany 19, Ireland 23, Sweden 25), a Show prices with tax Switch and a VAT number Input with a Check button. Under it a table lists six products by net price, tax and the price shown, with a total. Tax on a line is the net in cents times the rate, rounded half up per line, and a footnote names the rate. A VAT number that matches the country's pattern moves the whole list to Trade: tax-free and says that only the format was checked and nothing was looked up; Remove puts tax back. It's built from Native Select, Switch, Input, Field, Badge and Guides, with a CSS entrance only. For a trade, wholesale or cross-border shop.
FAQ
How do I fill it with my own products and rates?
Edit PRODUCTS for the net price of each in integer cents, COUNTRIES for each country's rate in whole percent and a sample number, and PATTERNS for the format of the VAT number per country. The tax, the shown price, the total and the footnote come from those.
How is the tax rounded?
Per line, half up, in integer cents: the tax is the net times the rate plus 50, divided by 100 and rounded down. The total is the sum of the lines, so the lines always add up to it. Floating point is never used for money.
What does the VAT number check?
Only its shape: for example the United Kingdom is the letters GB and nine digits. It does not look the number up, and the block says so: "Format checked only, nothing is looked up". A real shop validates the number with a tax service before it removes tax, and keeps the result with the order.
What stays local, and how do I wire it to real tax?
The rates are for the demo and the result of Check is only held in the tab. To wire it up, take the rate from your tax service for the shopper's country and, for a valid number, record the exemption on the customer. The switch can then become a stored preference.