shadcn.io is not affiliated with official shadcn/ui
Per Project Pricing Block for React
Four tiers sized by how many projects they hold, each headed by a grid of squares filled to its capacity, with its price and the cost per project that roll between monthly and annual billing.
Installation
Overview
Show how much room each tier gives with this per-project pricing section. The head of every tier is its capacity: the project count at display size over a grid of ten by five squares, filled to the limit. Solo fills 3 of them, Studio 10, Agency all 50, and Unlimited fills every square and fades out of the cell. Under the grid are the price and the cost per project worked out from it, so the buyer sees bigger tiers cost less per project, then a full-width Shine Button and a checklist of what the tier adds. A Segment Group in the header row switches between monthly and annual billing, and both the price and the cost per project roll to their new amounts with Sliding Number. The four tiers share their hairlines in one band, and the Studio tier is tinted with a Most chosen outline Badge and the only filled button. Below the md breakpoint a second Segment Group, the plan tabs, shows one tier at a time. The section sits on the page's drafting lines, drawn by Guides: rails at the edges of the page column, a rule along its top and a + mark on each crossing, and the same marks at the corners of the tier band. Built with Badge, Guides, Segment Group, Sliding Number, Shine Button and Lucide icons, with CSS transitions only. For preview, hosting, design and site-builder products whose value grows with the number of projects.
FAQ
How do I change the tiers, project limits and prices?
Edit the TIERS array at the top of the file. Each tier has its name, the number of projects it holds (null for unlimited), its monthly price, featureHeading and features, the call to action's cta and href, featured and an optional badge. The annual price is worked out from ANNUAL_DISCOUNT (20%) and rounded to whole units, so Studio's $29 becomes $23. CURRENCY is the symbol written before every price.
How do the project squares work?
Every tier draws the same ten by five grid, SQUARE_COUNT squares, and fills the first projects of them, so the grids compare against one scale: 3 of 50, 10 of 50 and all 50. A tier with no limit fills them all and fades out at the bottom. The grid is decorative and hidden from screen readers; the count beside it, such as "10 projects" or "Unlimited projects", says the same. If your biggest limit isn't 50, change SQUARE_COUNT and the column count together.
Where does the cost per project come from?
It's computed: the tier's current price divided by its projects, shown with two decimals, so it follows the billing switch (Studio is $2.90 a project monthly and $2.30 annually) and can't drift from the price above it. An unlimited tier shows "No cap on projects" instead.
How do I send the chosen tier and billing period to checkout?
Each call to action is a real link to its tier's href. It's a ShineButton with render set to an a element and nativeButton={false}. Add the billing period from the switch's billing state to the address, for example /checkout?tier=studio&billing=annually, and enforce the project limit on your server once the subscription is active.
How do the tiers fit on a phone?
Below md the four tiers collapse to one at a time: a segmented strip named "Plan" lists Solo, Studio, Agency and Unlimited, Studio is selected first, and the tiers you haven't picked are removed from the page, so a screen reader meets only the one you see. From md all tiers show, two across and then four from lg, and the billing switch sits beside the heading from lg.
When should I price per project instead of per seat?
Price per project when value grows with what customers build, sites, apps or client workspaces, rather than with how many people use the product: an agency with three people and forty client sites pays for the sites. Price per seat when each person gets the value, as in collaboration and communication tools.
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
Per-User Pricing as One Sentence
Seats and teamsThe 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.
- Pro
Billing Toggle Pricing
Billing switchesThree plan cards under a monthly and yearly switch that wears its saving in the header row, with prices that roll to their new amount and each plan a card in a card.
- Pro
Storage Plans Pricing
Charts and figuresThree archival storage plans as cells of one ruled band, each led by an oversized capacity figure with restore time and free restores under it, prices that roll on a monthly and annual switch.
- Pro
Team Tiers With Avatar Clusters
Seats and teamsThree team-size plans, each opening with a cluster of avatars sized to its host range, then its per-host price, a call to action and its features, with a segmented plan switcher on a phone.
- Pro
Three Columns Pricing
Plan cardsThe canonical three-column pricing section for a team knowledge base: Personal, Team and Company cells under a monthly and yearly switch, each outlined by hairlines that overshoot its corners, the recommended plan raised, one plan at a time on phones.