All Pricing blocks
Pricing 10
Two-card side-by-side plan comparison
A centered pricing section with a section heading and two pricing cards displayed side by side. Each card pairs a plan icon, price, and primary CTA with a checklist of features. Ideal for products with a simple two-tier offer on marketing and pricing pages. Cards stack into a single column on mobile.
New
In Pro Figma & Pro Figma + React
Radix UI
Base UI
8 styles
5 icon sets
Not Allowed
Get access to the full source code by upgrading to Pro Figma + React.
SBIOTJ
Join 9,000+ builders shipping with shadcncraft
Get access to this block and the full library
Production-ready blocks and components with matching Figma and React.
Benefits
Production-ready by default
Built with shadcn/ui conventions and designed for real projects.
Built with shadcn/ui
Clean React components using Tailwind and modern shadcn patterns.
Install instantly
Add the block directly using the shadcn CLI.
Works with your theme
Compatible with shadcn themes and token-based color systems.
MCP server support
Use shadcn MCP server right from your favorite AI tools.
Frequently Asked Questions
Yes. They follow shadcn/ui structure and are built for real products.
All blocks
More Pricing
Pro
Pricing 1
Three-tier card pricing grid
Pro
Pricing 2
Focused two-plan comparison
Pro
Pricing 3
Single plan spotlight
Pro
Pricing 4
Three-plan comparison with highlighted default
Pro
Pricing 5
Side-by-side plans with duplicated emphasis
Pro
Pricing 6
Single-plan focused pricing
Pro
Pricing 7
Feature-comparison table pricing
Pro
Pricing 8
Split two-plan pricing with social proof
Pro
Pricing 9
Muted panel with featured tier and joined plan cards
