For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
Best for: A seat stepper you drag or tap to reprice Team, in 4 plan columns joined in one Card with a hover hint per feature
When to use
- A public plans section with 3 or 4 tiers side by side, each with a price, its inclusions and its own button
- A plan comparison matrix that lines up each tier's limits and included features row by row
- An upgrade dialog or paywall inside the product, where a user picks a plan and a billing period
When not to use
- Seat counts picked from team size tabs, with owned plans shown disabled: use the Per-Seat Pricing block
- Back office staff editing plan tiles, prices and status toggles for the catalog: use the Plan Catalog block
- A back office where staff edit the plan catalog, coupons or a customer's subscription: use the Billing blocks
- Store products weighed side by side on specs and star ratings before a purchase: use the Comparison blocks
- One plan choice made as a single input inside a signup or checkout form: use the Radio Group component
Agent notes
minSeats,maxSeatsanddefaultSeatson the one seats plan inPLANSset the stepper range; no other plan has a stepper- The
seatsstate lives inPlanColumnand never reaches the plan link, so pass it to your own checkout - Yearly figures derive from
YEARLY_DISCOUNT_PERCENTthroughbilledAt; pick a percent that divides each rate or prices round - Each plan's
hrefinPLANSis a hash placeholder that its plan button links to; point it at your signup, checkout or sales route - Plan prices print through a
currencyformatter pinned to en-US dollars withmaximumFractionDigits0; edit it for cents or another currency
https://web.dev.reui.io/blocks/marketing/pricing/pricing-1.mdget_block("pricing-1")npx shadcn@latest add @reui/pricing-1Shadcn Seat Stepper Pricing Block
4-tier pricing table with a monthly or yearly toggle and a seat stepper that reprices Team. Part of the ReUI Shadcn Marketing Pricing blocks collection.
SaaS plans in one Card: a Save 20% Badge on the yearly tab, a tinted featured plan, tiers that list only what they add, Tooltip feature hints. Uses ReUI Number Field, Badge, shadcn Tabs, Button. For pricing page, subscription tiers, per-seat plans.
It is composed from Badge, Button, Card, Number Field, Tabs, Tooltip, so every part of it is a primitive you can restyle with your own design tokens.
What You Can Build With the Seat Stepper Pricing Block
- Install it with the ReUI registry command in the toolbar above, then swap the placeholder content, data wiring, and business logic for your own.
- Compare it across all eight ReUI styles and both the Base UI and Radix bases in the customizer before committing to one direction.
- Combine it with the other Shadcn Marketing Pricing blocks to assemble a full screen instead of a single section.
All Shadcn Marketing Pricing Blocks
The rest of this category, each on its own page with a live preview, the components it is built from, and the install command.
- Plan Comparison Plan comparison table with a sticky plan head and metered usage rows
- Per-Seat Pricing Per-seat pricing table with team size tabs, 3 plan columns and a 13-row feature comparison
- Customer Logo Pricing Pricing section with 3 plan cards, a billing tab switch and a customer logo row
- Pricing FAQ Links Pricing section with 4 plan cards, a monthly or yearly tab switch and 2 help links
- Agency Pricing Dark pricing section with 3 plan cards, billing tabs and a customer logo row
- Upgrade Plan Dialog Pricing dialog with a plan rail, billing tabs and a plan detail panel
- Usage Limit Upgrade Pricing dialog with framed plan cards, billing tabs and a feature table
Related Shadcn Marketing Block Categories
- Blog (6) Blog post layouts, article grids, and content listing components for editorial sites.
- Compare (3) Versus sections that set a product against the workflow it replaces, as a feature matrix, a card beside a plain list or 2 step tracks.
- Contact (6) Contact forms, support and enquiry sections, and office detail panels for business and portfolio sites.
- CTA (17) Call to action sections that close a page, from centered email captures and split layouts to full-width banners with photos and proof rows.
- FAQ (6) FAQ and accordion sections for common questions, knowledge bases, and support pages.
- Hero (16) Hero sections with announcement pills, two-tone headlines, dual calls to action, and framed product consoles.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
When should I use the Seat Stepper Pricing block?
Use it for a seat stepper you drag or tap to reprice Team, in 4 plan columns joined in one Card with a hover hint per feature.
The Pricing category fits:
- A public plans section with 3 or 4 tiers side by side, each with a price, its inclusions and its own button
- A plan comparison matrix that lines up each tier's limits and included features row by row
- An upgrade dialog or paywall inside the product, where a user picks a plan and a billing period
For seat counts picked from team size tabs, with owned plans shown disabled, use the Per-Seat Pricing block. For back office staff editing plan tiles, prices and status toggles for the catalog, use the Plan Catalog block. For a back office where staff edit the plan catalog, coupons or a customer's subscription, use the Billing blocks. For store products weighed side by side on specs and star ratings before a purchase, use the Comparison blocks. For one plan choice made as a single input inside a signup or checkout form, use the Radio Group component.
What is the Seat Stepper Pricing block built with?
Can I restyle the Seat Stepper Pricing block?
How should I use Shadcn pricing blocks in a real project?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.