Shadcn.io is not affiliated with official shadcn/ui
Pricing Platform Fee
A split layout pricing section for React and Next.js with a marketing headline on the left and stacked platform fee tier rows on the right showing animated take-rate percentages with NumberFlow, transaction caps, payout speed, and ShadcnioButton CTAs with a dark Business tier highlight built with shadcn/ui Tooltip components and Tailwind CSS
Communicate marketplace fee structures with persuasive clarity using this split layout pricing section for React and Next.js. Features a left-aligned marketing headline with positioning copy and trust signals, a right-side column of four stacked tier rows showing animated take-rate percentages via NumberFlow, transaction caps, payout speed badges, and ShadcnioButton CTAs with sliding arrow hover effect, a dark bg-foreground Business tier acting as the recommended row, and an emerald savings indicator on the largest tier. Built with TypeScript, ShadcnioButton, NumberFlow, shadcn/ui Tooltip components, motion/react staggered entrance animations, Lucide React icons, and Tailwind CSS. Perfect for marketplace pricing pages, payment platform fee breakdowns, and platform-as-a-service rate cards.
Related Components
Comparison Table Pricing
Feature matrix comparison table
Per Transaction Pricing
Transaction-based pricing model
Pay As You Go Pricing
Usage-based pay per use pricing
Tiered API Pricing
Volume-based API pricing tiers
Volume Discount Pricing
Volume-based discount tiers
Enterprise Contact Pricing
Enterprise plan with contact sales
FAQ
Was this page helpful?
Sign in to leave feedback.
Plan Recommender
An interactive quiz-driven plan recommender block for React and Next.js with split layout featuring three PillTabs question selectors for team size, primary use case, and budget on the left and a dynamically computed recommended plan card on the right with NumberFlow animated price, ShadcnioButton CTA, emerald checkmark feature list, and red Recommended badge built with shadcn/ui Tooltip and Tailwind CSS
Popular Choice
A classic three-column pricing section for React and Next.js with PillTabs billing toggle, NumberFlow animated prices, an emerald-ringed Most Popular middle card with red Best Value badge, progressive feature lists with emerald checkmarks and tooltips, ShadcnioButton CTAs, and a trust footer built with shadcn/ui Tooltip components and Tailwind CSS