shadcn.io is not affiliated with official shadcn/ui
Tax Calculator Checkout Block for Ark UI
A tax step that builds sales tax up by jurisdiction from a ZIP code: four typed ZIPs, a native table of State, County, City and District rates with each line rounded in cents, a tax-exempt box with a format-checked certificate, and the order beside it.
Installation
Overview
Show where the tax comes from, with this tax calculator checkout for React with Ark UI. A compact header from Calverdale, an outdoor-clothing shop, sits over a hairline frame with a plus mark on each corner. The main cell takes a ZIP code in an Input inside a Field, with four one-press shortcuts for the typed ZIPs (California, New York, Oregon and Illinois), and builds the stack in a native table with a hidden caption: State, County, City and District, each with its rate and the tax on the taxable subtotal worked out in whole cents and rounded half up on its own, and a total row that is the sum of the lines. Oregon says "No sales tax in Oregon." A Checkbox marks the order tax exempt and opens a certificate field (EX- and eight digits, checked as you type); with a valid one the tax drops to $0.00, and a note says a store would verify the certificate first. The side cell keeps the order: two items, shipping, tax and the total. The rates are made-up examples and the panel says so. Continue to payment is the only Shine Button. For any shop that charges sales tax by address.
FAQ
Are these the real tax rates?
No. The four stacks in PLACES are invented examples so the table has something to build, and the panel says "Rates are examples for this demo, not tax advice." Real sales tax depends on the exact address, the product and the day, so a real shop asks a tax service (or its payment provider's tax product) for the jurisdictions and rates and shows what comes back in this same table.
How is each line rounded?
Each jurisdiction's tax is the taxable subtotal in cents times its rate in hundredths of a percent, rounded half up to a whole cent, and the tax is the sum of those rounded lines. That is how many tax authorities want it, and it means the table always adds up to the figure in the order. Shipping is not taxed in the demo's rules; change SHIPPING handling in totalOf if yours is.
What does the tax-exempt box do?
Ticking it reveals a certificate field that is always laid out, so the panel does not move. A number like EX-12345678 is accepted as a format only; with it, every line and the total show $0.00 and a note says a store would verify the certificate before it removes the tax. An unfinished number shows a problem under the field and Continue to payment stays in place but answers "Fix the certificate number first." instead of moving on.
What does the ZIP field accept?
Digits only, up to five; anything else you type or paste is dropped. When all five digits are in and no rates are typed for them, the field says so and names the four shortcuts; until then the table shows dashes, so its height never changes. Continue to payment stays in place and explains instead of going on.
How does it look on a phone?
The side cell stacks under the main cell with its own top rule, the table keeps three columns (jurisdiction, rate, tax) at a width that fits 320 pixels, and the foot is pinned to the bottom of the screen with the status line above a full-width button.
What stays local in the demo, and how do I wire it up?
Everything: the ZIP, the box and the certificate live in the block's state and nothing is filed or charged. In your app look the address up with your tax service on every change that affects it, keep the response's breakdown with the order, validate the certificate on your server against the buyer's account, and show the service's error in the same status line.