shadcn.io is not affiliated with official shadcn/ui
Tax Display Pricing Block for React
Prices with their tax on show: a country picker and an incl. VAT switch re-roll each plan, which lays out the price before VAT, the VAT rate and the total, with plan tabs on phones.
Installation
Overview
Show the price a customer will actually pay with this tax-aware pricing block for React with Base UI. A compact header holds the headline and the two controls that matter: a Select for the country and a Switch that shows prices with or without VAT. Pick a country and every plan applies its standard VAT rate; flip the switch and the big price rolls between the price before VAT and the total with Sliding Number. Under each price, a small receipt lays out the price before VAT, the VAT rate and the VAT amount, and the total, so the tax is never a surprise at checkout. The three plans sit in cells with shared hairlines, the middle one tinted and holding the one primary Shine Button. On a phone a Segment Group switches one plan at a time, with the featured plan first. A footnote explains the reverse charge for businesses with a VAT ID. The section sits on the page's lines, drawn by Guides: side rails, a rule along its top and + marks at the corners of the plan band. Built with Select, Switch, Segment Group, Badge, Sliding Number, Shine Button, Guides and Lucide icons, with CSS transitions only. For website builders, SaaS tools and any product sold to EU customers.
FAQ
How do I change the countries and their rates?
Edit COUNTRIES at the top of the file: each has a label, a value (the ISO code) and a rate, the standard VAT rate in percent. The rates shown are the standard rates of EU countries as of this writing, so check them against your tax adviser or your payment provider's tax tables before you ship. Add a country by adding an entry, or replace the list with the countries you sell to.
How is the VAT calculated and rounded?
vatOf multiplies the price before VAT by the rate and rounds to the cent, and the total is the two added up, so the three numbers in a receipt always sum exactly. Fractional rates work as well as whole ones. If your billing system rounds differently, such as per invoice rather than per line, change that one function so the page matches your invoices.
Does it handle businesses with a VAT ID?
It explains it, but it doesn't change the prices. In the EU a business in another country with a valid VAT ID pays no VAT under the reverse charge, and the footnote says so. Validating the ID happens at checkout in your billing flow; the page only sets the expectation. If you want the price to change on the page, add an ID field and set the rate to zero when it validates.
Where do the calls to action go?
Each plan's button is a real link. It's a ShineButton with render set to an a element and nativeButton={false}. The featured plan's is the only primary button and the others are outlined; the switch is drawn in your foreground colour so it doesn't compete.
Is it accessible?
Yes. The country picker and the switch are named, the plans are articles named by their plan, and each receipt is a description list. The prices are not a live region, so changing the country or the switch doesn't interrupt a screen reader; a polite status line says which country and whether VAT is included.
How does it look on a phone?
Below the md breakpoint one plan shows at a time, picked from a segmented control with the featured plan selected first, so the price, its tax line and the button are all in the first screen and a half. The header's controls wrap under the sentence. The other plans stay in the page but are hidden with display, so a screen reader only meets the one you see.
Related
- $€£¥₹Pro
Currency Select Pricing
Billing switchesPrices in the visitor's currency for a travel planner: five large currency chips in the header and three plan cells whose prices roll at display size between dollars, euros, pounds, yen and rupees, each currency with its own local price points.
- Pro
Region Pricing
Billing switchesInfrastructure pricing by region for a container host: a grid of six regions with each one's latency and price per hour, where choosing one re-prices the call to action beside it and the three instance sizes under it.
- Pro
Billing Toggle Pricing
Billing switchesThree plan cards under a monthly and yearly switch that wears its saving in the header row, with prices that roll to their new amount and each plan a card in a card.
- Pro
Invoice Preview Pricing
Comparison tablesThree payroll plans as itemised monthly invoices: pick a headcount and each plan's bill adds up line by line, with its total and call to action at the top of its column.
- Pro
Purchasing Power Pricing
Billing switchesRegional pricing by purchasing power: pick a country and the price follows a published index, with the list price struck, the discount on a scale and a note on how the country is verified at checkout.
- Pro
Comparison Table Pricing
Comparison tablesFour plans compared feature by feature in one table whose hairlines meet the page rails, with a billing switch, a tinted popular column and, on a phone, a plan switch that keeps the feature column beside one plan.