Shadcn Pricing Block Three

A pricing section with three self-serve tiers followed by a separate enterprise contact row.

Block Three is for pricing pages that need both self-serve plans and a custom sales path. Free, Pro, and Startup sit in the first bordered panel, then Enterprise Custom Plan gets its own row with a Contact Sales button and a two-column feature list.

How the pricing section works

The component still uses React state for monthly versus annual pricing and NumberFlow for Pro and Startup values. Enterprise is not tied to the billing toggle, which is the right signal when pricing depends on custom invoicing, roles, reporting, or priority support.

Where this variant fits

This layout works well on a SaaS landing page where visitors may self-select into checkout or sales. The plan names and enterprise features are demo copy, so replace them with real packaging before using the block for revenue decisions.

What to customize

Make the enterprise row specific about who should contact sales.
Check the border and divide behavior at the @4xl breakpoint.
Point Get Started and Contact Sales to distinct flows.

Frequently asked questions

Is this pricing block responsive?

Yes. The source uses Tailwind CSS responsive utilities and container-query classes so the pricing section can compress into a narrow stack and expand into columns where space allows.

Can I use it in a Next.js app?

Yes. The block is React code styled with Tailwind CSS and shadcn conventions. Because the billing toggle is client-side state, keep the component behind a client boundary when you preserve the interactive price switcher.

What should I replace first?

Replace the demo plan names, placeholder links, feature arrays, and price values with your real SaaS landing page offer before tuning visual details.

Related Shadcn UI blocks

Start from Tailark

Preview Shadcn Pricing Block Three