Seat calculator
Pricing by team size, the calculator on a SaaS pricing page: drag the slider and faces join your team, the price rolls, the plan steps up at each tier, and yearly billing shows what you save.
How big is your team?Pay only for the seats you use
Starter
/ month
$14 per seat · billed monthly
- Unlimited projects
- Real-time collaboration
Things to try
- Drag the slider, or type a number. Faces join and leave your team and the price rolls like a counter.
- Cross a tier. The plan steps up and brings its extra features with it.
- Switch to yearly. The monthly price is struck through and the saving is shown.
- Go past the last tier. The price gives way to a conversation.
Install
npx shadcn@latest add https://your-docs-site/r/seat-calculator.jsonDependencies
The install command adds these for you. If you copy the code by hand, install them yourself.
npm install @base-ui/react @hugeicons/core-free-icons @hugeicons/react @remold-ui/react motionHow it works
- One number drives everything. The slider and the number field are Base UI's Slider and Number Field bound to the same seat count, and every other part is derived from it.
- The faces, features and plan changes are Motion; the price rolls with a small odometer. Billing period is Base UI's Toggle Group.
The prices are made up.
Revenue
The revenue card at the top of every SaaS dashboard: switch the range and the chart line reshapes instead of redrawing, while the MRR and the change badge roll to their new figures.
Send a message
Sending a chat message: the mic turns into a send arrow as you type, your message rises into the thread, the read receipt slides down to it and their reply takes the typing bubble's place.