shadcn.io is not affiliated with official shadcn/ui
Per-User Pricing as One Sentence Block for React
The simplest per-user price, said as one giant sentence, '$8 per user, per month.', with a small stepper for the team's users and a monthly total beside it.
Installation
Overview
Say the price once, at a size nobody can miss, with this per-user pricing section. A header row gives the headline, "One price for the whole team", and one line, with a small stepper at its end: a minus, the number of users and a plus built from Button. Below it a hairline band holds a single sentence in display type, "$8 per user, per month.", with the price in the foreground color and the rest softer, and beside it the monthly total for the team, rolling to its new amount with Sliding Number, over a full-width Shine Button, the block's only colored element. There are no plans to compare and no feature grid; a footnote gives the yearly price. The band's lines meet at + marks drawn by Guides, under the page's top rule. Built with Button, Sliding Number, Shine Button, Guides, Lucide icons and Tailwind CSS, with CSS transitions only. For async tools, small-team software and any product whose pitch is that there's only one price.
FAQ
How do I change the price and the starting team size?
Edit the constants at the top of the file: PRICE is the monthly price per user, YEARLY_PRICE the monthly price when paid for a year, START_USERS the number the stepper opens at and MIN_USERS and MAX_USERS its limits. The sentence, the total and the footnote are written from those numbers, so they can't disagree. CURRENCY is the symbol before every amount.
How do I send the user count to checkout?
The call to action is a real link. It's a ShineButton with render set to an a element and nativeButton={false}. Build its href from users, for example /signup?users=12, and create a subscription with a per-unit price and that number as the quantity.
Is the stepper accessible?
Yes. The stepper is a group named "Users on your team" with buttons named "Add a user" and "Remove a user", and the count is an output element, so each change is announced politely. At the lowest and highest counts the button is marked aria-disabled rather than disabled, so pressing it never drops the keyboard's place. The giant sentence is real text in a paragraph, read as "$8 per user, per month."
How does the giant sentence fit on a phone?
It steps down from 72 to 60 pixels below the sm breakpoint and wraps onto as many lines as it needs, balanced so no line ends on a single word. The stepper moves under the headline, the total and the call to action stack under the sentence, and the call to action lands within the first screen and a half of an iPhone.
When is a single sentence better than a pricing table?
When there is one price. A table asks the visitor to compare, and with nothing to compare it only adds doubt: is there a catch? A sentence at this size answers the question before it's asked, and the stepper lets the buyer's own team size do the rest. If you add tiers or feature gates later, switch to a plan layout; don't squeeze them under this sentence.
Related
- Pro
Per-Seat Pricing by Seat Type
Seats and teamsSeat-type pricing with a stepper for each type: Full, Collaborator and Viewer seats at different prices, a stacked bar of the seat mix, a live monthly total and, on a phone, a sticky total bar.
- Pro
Flat Rate Pricing
Single planOne flat price for the whole company, set as a typographic band: the price at display size, the meters it never charges for struck through beside it, one call to action, and four cells of what's included.
- Pro
All Inclusive Pricing
Single planOne price over a wall of everything it includes: 36 features as ticked chips in six ruled groups, with the price and one call to action in the header row and nothing gated or extra to buy.
- Pro
Team Size Slider With Volume Discounts
Seats and teamsA seat calculator: a slider sets the team size with its count riding the thumb, ticks at the 10, 25 and 50 seat discounts, shortcuts to them, and a panel that rolls the seat price and monthly total.
- Pro
Minimal Single Plan Pricing
Single planThe quietest single plan: one card in a card with a launch price beside the struck-out regular price, one call to action and six included features, under a short centred header.
- ∞Pro
Unlimited Plan Pricing
Single planOne flat-rate plan under an oversized Unlimited wordmark: a price cell with the call to action beside eight feature cells that share hairlines, each with a line of detail.