All Pricing Blocks

Open any block on its own page for a live preview, the components it is built from, and the install command.

• Pricing 1 4-tier pricing table with a monthly or yearly toggle and a seat stepper that reprices Team
• Pricing 2 Plan comparison table with a sticky plan head and metered usage rows
• Pricing 3 Per-seat pricing table with team size tabs, 3 plan columns and a 13-row feature comparison
• Pricing 4 Pricing section with 3 plan cards, a billing tab switch and a customer logo row
• Pricing 5 Pricing section with 4 plan cards, a monthly or yearly tab switch and 2 help links
• Pricing 6 Dark pricing section with 3 plan cards, billing tabs and a customer logo row
• Pricing 7 Pricing dialog with a plan rail, billing tabs and a plan detail panel
• Pricing 8 Pricing dialog with framed plan cards, billing tabs and a feature table

What Each Pricing Block Ships

• 4 tiers and a seat stepper 4 plan columns in 1 Card under a monthly or yearly toggle with a Save 20% Badge, where a ReUI Number Field sets 2 to 20 seats and reprices the Team plan.
• A comparison table with a sticky price head 4 plans over 4 feature sections with IconTile bands. Names, prices and buttons stick as the rows scroll, allowances print over their metered rate, labels open hints in a Popover, and a ToggleGroup shows 1 plan at a time in a narrow container.
• Seat pricing by team size A customer quote over 3 plans. Solo, Startup, Growth and Enterprise Tabs set the seat count and a lower seat rate at each size, strike the list price and switch off the rows that need teammates, over 13 feature rows with Tooltip hints.
• 3 plan cards over a customer logo row Flat Basic, per-seat Business and quoted Enterprise on a dot grain, under Monthly or Annual tabs with a 20% Off chip. A Best Value badge straddles the Business card, and check or minus rows show what each plan leaves out.
• 4 plan cards and 2 help links Free, Team, Growth and Enterprise share 8 check or minus rows, Monthly or Yearly tabs with a Save 25% chip reprice Team and Growth, and a dotted card links a feature comparison and a pricing FAQ through Item rows.
• A dark section with toned cards 3 plans that stay dark in either theme, each card washed in its own tone with a dot field. The 2 Months Free yearly tab reprices the base rate and the extra seat fee and shows the yearly total. Each tier above Basic lists what it adds to the one below.
• A plan picker dialog A Dialog with a RadioGroup rail of 3 plans beside the chosen plan's price and features. Monthly or Yearly tabs reprice the rail and the plan, and the footer announces the bill whenever the plan or the period changes.
• An upgrade dialog at a usage limit 3 Frame plan cards side by side under billing tabs, an All Features table behind a Collapsible, and a strip with the current plan and the bookings left. On a narrow screen a plan rail picks 1 card and the footer holds the action.

Layout, Billing and Keyboard Behaviour

• The 6 page sections respond to their container, not the viewport, so the plans reflow by the width of the slot you drop them into. The 2 dialogs size to the window instead.
• In 4 of the sections the cards or columns share subgrid rows, so names, prices, buttons and feature lists stay level across a row even when a list wraps.
• The billing and team size tabs activate on focus, so the arrow keys switch the period or the size straight away.
• A left-out row also reads Not included to a screen reader, and a recommended badge drawn for the eye is repeated in words in the plan heading.
• The 2 dialogs keep their header in place and scroll the body under it, and they open with focus on the dialog rather than on the first tab.
• Prices print through a pinned en-US currency formatter with no decimals, so the server and the browser render the same string.

Built From

• shadcn/ui and ReUI components Built on shadcn Card, Tabs, Table, Button, Dialog, RadioGroup, ToggleGroup, Popover, Tooltip, Collapsible and Item, with the ReUI Badge, IconTile, Frame and Number Field primitives.
• Both twins, every style Every block ships on Base UI and on Radix, in 8 design styles, and its plan data file is identical in both twins.

Related Shadcn Marketing Block Categories

A pricing section sits in the middle of a page. These are the sections around it, and the app screens behind the plans.

• FAQ Question and answer sections, most of them accordions, for the billing and license questions a plan table raises but has no room to answer.
• Compare Versus sections that make the case for the product before the reader reaches the plans.
• CTA Headline and button bands for closing the page the pricing section sits on.
• Hero First-screen sections that state the positioning before a reader scrolls down to the plans.
• Billing The app side of the same plans: subscription, invoice, metering, upgrade and failed payment pages, plus a plan catalog editor.

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 (344) Browse 344 Shadcn Application blocks across 24 categories.
• Shadcn Data Grid Blocks (39) Browse 39 Shadcn Data Grid blocks across 8 categories.
• Shadcn Solutions Blocks (74) Browse 74 Shadcn Solutions blocks across 10 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.
• Shadcn AI & Agents Blocks (18) Browse 18 Shadcn AI & Agents blocks across 2 categories.