Skip to main content
BlocksPricing

Pricing

Ready-to-use pricing table blocks for shadcn/ui. Tiered cards, comparison grids, and billing toggles from the shadcn figma design kit — install via CLI or customize in Figma.

Three-column cards with billing toggle

A classic three-tier shadcn/ui pricing section with Starter, Growth, and Enterprise cards. Features a monthly/yearly billing toggle, per-plan icons, a "Save 25%" badge on the highlighted plan, and a full feature checklist per tier. Uses Button, Card, Badge, and Label — fully themeable with semantic tokens. Install this Pro Block via the CLI command above.

Three-column cards with annual toggle

A shadcn/ui pricing comparison inside a bordered card container with three tiers (Essentials, Plus, Pro). Includes an annual pricing toggle via the Switch component showing a 15% discount, category jump links with icons on the free tier, and checkmark feature lists on paid tiers. Fully responsive and themeable. Install via the CLI command above.

Three-column cards with plan category tabs

A shadcn/ui pricing page with a tabbed plan category switcher (Individual, Team & Business, API) above three plan cards (Free, Pro, Max). Each card shows a decorative icon, price with billing details, a primary CTA, and a progressive feature list with checkmarks. Uses only semantic tokens for full theme compatibility. Install via the CLI command above.

Four-column comparison with feature table

A full-width shadcn/ui plan comparison with four columns (Free, Starter, Professional, Organization) and a "Most popular" badge. Below the plan headers, feature rows are grouped by category (Outreach, Pipeline) with checkmarks, dashes, and text values. Built with Button and Badge — ideal for complex SaaS pricing. Install via the CLI command above.

Four-column cards with highlighted plan

A four-tier shadcn/ui pricing grid (Free, Pro, Business, Enterprise) with the Business plan highlighted as "Best value" using a primary-bordered Card and floating Badge. Each card lists audience, price, product availability labels, a CTA, and a progressive checkmark feature list. Fully responsive and themeable. Install via the CLI command above.

Vertically stacked plans with feature checklist

Three shadcn/ui pricing cards stacked vertically, each with a two-column layout: plan info and CTA on the left, and a checkmark feature list on the right. Suited for service-based or consulting pricing with Pilot, Growth, and Custom tiers. Uses Card, Button, and semantic tokens. Install via the CLI command above.

Feature comparison table with plan toggle

A shadcn/ui feature comparison table with three plan columns (Free, Explorer, Scholar), a monthly/yearly billing toggle, and decorative icons per plan. Feature rows display checkmarks, X marks, and text values for granular plan differentiation. Clean tabular layout ideal for feature-heavy products. Install via the CLI command above.

Asymmetric free and premium tiers

An asymmetric two-column shadcn/ui pricing layout with a Free tier card on the left and a Premium card on the right containing two sub-plans (Plus and Family) with a yearly/monthly toggle and strikethrough pricing. Includes a bottom banner for group discounts. Uses Card, Button, and Badge. Install via the CLI command above.

Two-column detailed comparison table

A detailed two-column shadcn/ui plan comparison (Free vs Pro) with feature rows organized by category (Core Platform, Corporate Cards, Treasury). Each row shows checkmarks, dashes, or specific text values. Ideal for fintech or enterprise products with granular feature differences. Install via the CLI command above.

Single plan feature card

A centered shadcn/ui pricing card for a single plan with a 2x2 feature grid — each feature has an icon and description. Shows plan name, description, monthly price, and a primary CTA. Perfect for products with one paid tier or upgrade upsells. Built with Card and Button. Install via the CLI command above.

Four-column cards with add-on sections

A four-tier shadcn/ui pricing grid (Free, Team, Business, Enterprise Scale) with a "Most popular" Badge, extensive checkmark feature lists, and "Available add-ons" subsections on paid plans. Handles complex SaaS pricing with per-seat billing and tiered record/automation limits. Install via the CLI command above.

Three-column pricing with category comparison

A three-tier shadcn/ui pricing section (Free, Grow, Scale) with a "Popular" Badge, radio-style annually/monthly toggle, per-plan highlight lists, and a categorized feature comparison table below (Workspace, Build). Rows show checkmarks, dashes, and text values. Built with Button, Badge, and semantic tokens. Install via the CLI command above.