shadcn.io is not affiliated with official shadcn/ui
Per Seat Pricing Billing Block for Vue
A six-month seat plan under graduated pricing: a stepper for the seats in each month, a stacked column of the bill in three price bands, the six-month total and the dearest month.
Installation
Overview
Let a manager plan hiring against the bill, with this seat plan section for Vue with Ark UI. A hairline frame with a plus mark on each corner starts with the price of a seat in three bands, each with a weight of the foreground color. Six month cells on shared hairlines follow, from November to April. Each holds a Number Input for the seats that month, started at the numbers a hiring plan gives, and a small stacked column that shows the month's bill: every seat is charged at the rate of the band it falls in, so seats 1 to 9 cost $12.00, 10 to 24 cost $10.00 and 25 and up cost $8.00, and the column splits into the same three weights. The bill, the seat count and a badge on the dearest month sit beside each column. Below the cells the six months add up to a total that rolls with Sliding Number, with the average a seat. A Shine Button saves the plan, the only colored control, and Discard returns to the saved one. For per-seat products with graduated pricing and a hiring plan.
FAQ
How do I change the bands, the months and the starting seats?
Edit BANDS (the first and last seat of each band and its price), MONTHS (a label and the starting seat count for each month), MAX for the most seats you allow and SEATS_NOW for today's count. The columns are scaled to the bill for the most seats, so a month never outgrows its cell.
What does graduated pricing mean here?
Each seat costs the rate of the band it falls in, not the rate of the band the whole team lands in. At 25 seats the first 9 cost $12.00, the next 15 cost $10.00 and the 25th costs $8.00, which is $266.00. The total is always the sum of those parts, and the columns show them.
What stays local, and how do I wire the save?
Save only keeps the plan in this page and says "Planned here. Seats unchanged." The account's seat count does not change and nothing is sent. To make it real, send the six numbers to your backend in save and read them back as the saved plan.
What happens when I type a number outside the range?
The count is held to between 1 and the maximum, and the line under the bill shows the seats actually used. The Number Input steps with its buttons and with the arrow keys.
How does it work with a keyboard and a screen reader?
Each stepper is named for its month ("Seats in Dec 2026"), the columns are decorative and hidden from assistive technology, and the bill and seat count next to them are text. A polite status message reports unsaved changes and the result of saving.