shadcn.io is not affiliated with official shadcn/ui
Estimate Calculator Billing Block for React Aria
Two price scenarios side by side, Today and After launch, each with users and storage fields and itemised lines, a yearly switch, a delta sentence and a share button that copies five lines.
Installation
Overview
Let a buyer price the plan they have and the plan they expect, with this estimate calculator for React with React Aria. Two columns, Today and After launch, share a hairline: each has a Number Input for users and one for storage in GB, a line for each ($12 a user, $0.50 a GB) and a total in large tabular figures. A Switch in the header marks both columns as billed yearly and takes 20% off, shown as its own line. A band under the columns says what launch adds in words and with a sign, such as "After launch costs $440 more a month (+36.1%)". Shine Button Share this estimate copies a five-line text of both scenarios to the clipboard. The frame is ruled by Guides. It's built from Number Input, Switch, Shine Button and Guides, with a CSS entrance only. For storage, seat and usage pricing pages and quote requests.
FAQ
How do I set my prices?
Edit USER and GIGABYTE (cents a month), YEARLY (the discount in percent), the limits MOST_USERS and MOST_GB, and the starting values in the useState calls. Every line, total, difference and percentage is derived from the two fields of each column, so nothing is typed twice.
What does Share this estimate copy?
Five lines of plain text: the heading with monthly or yearly billing, the Today line, the After launch line, the difference and a note with the date of the prices. It uses the browser's clipboard, and if the browser blocks it the status line says nothing was copied. Paste it into an email or a ticket.
What stays local, and how do I make it real?
All the numbers: nothing is saved or sent, and a reload returns to the starting values. To keep an estimate, post the two sets of fields to your server from the share handler and put the saved link in the copied text instead of the lines.
How do the number fields behave?
Typing is clamped to the field's range when read, and a field that is empty counts as zero. React Aria commits a typed value when you leave the field, press Enter or use an arrow. The plus and minus buttons step by one. Arabic-Indic digits typed under a right-to-left locale are read as ordinary digits.