Shadcn.io is not affiliated with official shadcn/ui
Pricing Bento Grid
An asymmetric bento grid pricing section for React and Next.js with five plan tiles arranged in a 3-column 2-row layout where the featured Pro tile spans both rows as the visual anchor, NumberFlow animated prices, ShadcnioButton CTAs, semantic icon headers, and quick highlight bullets per tile built with shadcn/ui and Tailwind CSS
Anchor your pricing page with a striking asymmetric bento grid section for React and Next.js. Features a marketing headline, five plan tiles arranged in a 3-column 2-row CSS Grid where the featured Pro tile spans both rows acting as the visual anchor, smaller corner tiles for Free Starter Business and Enterprise tiers, NumberFlow animated prices that lift in on first paint, ShadcnioButton CTAs with sliding arrow hover, Lucide icon headers per tile in semantic colors, three highlight bullets per tile with emerald checkmarks, and a red Best Value badge on the featured tile. Built with TypeScript, ShadcnioButton, NumberFlow, motion/react staggered entrance animations, Lucide React icons, and Tailwind CSS. Perfect for SaaS pricing pages, indie product landing pages, modern dashboards, and any product wanting a memorable non-grid pricing layout that breaks the standard three-column convention.
Related Components
Three Column Pricing
Classic three-tier pricing cards
Three Columns Stat Chips
Three columns with stat chips
Featured Plan Pricing
Single highlighted plan spotlight
Stacked Cards Pricing
Vertically stacked plan cards
Grouped Comparison Table
Category-grouped feature matrix
Comparison Table Pricing
Feature matrix comparison table
FAQ
Was this page helpful?
Sign in to leave feedback.
Audience Tabs
A tab-based audience pricing section for React and Next.js with PillTabs for individuals teams and enterprise audiences three-column plan cards per tab progressive feature lists with emerald checkmarks ShadcnioButton CTAs and AnimatePresence transitions built with shadcn/ui and Tailwind CSS
Billing Toggle
A three-column billing toggle pricing section for React and Next.js with PillTabs monthly and annual switch NumberFlow animated price transitions three plan cards with progressive feature lists emerald checkmarks ShadcnioButton CTAs and red Best Value badge built with shadcn/ui and Tailwind CSS