Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Billing blocks

Pro

Estimate Calculator Billing Block for Vue

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let a buyer price the plan they have and the plan they expect, with this estimate calculator for Vue with Ark UI. 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. The plus and minus buttons step by one. Arabic-Indic digits typed under a right-to-left locale are read as ordinary digits.

How does it look on a phone?

The two columns stack with a rule between them, each keeps its two fields side by side, and the sentence and the share button follow. The sentence has a reserved line so the page does not jump while you type.

All 167 billing blocks