A three column pricing section that renders a PlanCard for each tier you pass in, stacking on mobile. Mark one plan as highlighted to steer visitors toward it.
npx shadcn@latest add @minidev/pricing-tableCode Pricing sections and pricing tables for React
Free React pricing section components for Tailwind CSS: three-tier pricing tables, plan cards, monthly and yearly toggles, feature comparison tables and animated pricing pages. MIT.
10 blocksFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark
Pricing sections carry the most expensive words on a site, so they need to be exact: three plans with the middle one highlighted, a billing toggle that updates every price, and a comparison table for the people who read everything before they buy.
These blocks go from a single plan card to a full pricing page with motion. The plan data is plain objects, so you can feed them from your billing system or a CMS.
Pricing Plans
blockA React pricing section with a monthly or yearly switch that rolls prices to the new value, a featured ink plan, and feature rows marked included or not.
npx shadcn@latest add @minidev/pricing-plansCode Pricing Page
motionA full Tailwind pricing page with a monthly or yearly toggle, animated plan cards, a feature comparison table, pricing FAQs, a glowing CTA and a mega footer.
npx shadcn@latest add @minidev/pricing-pageCode Pricing Motion
motionPricing plan cards that fade up in sequence on scroll, each with name, price, blurb, feature bullets and a choose button, plus an accent featured plan.
npx shadcn@latest add @minidev/pricing-motionCode Pricing Kinetic
motionA pricing section pairing a kinetic headline and a typographic marquee with a free versus premium feature comparison table. Built for React launch pages.
npx shadcn@latest add @minidev/pricing-kineticCode A Free versus Pro comparison table with a row per feature and check or dash icons in each plan column. Shows what an upgrade unlocks on Tailwind pricing pages.
npx shadcn@latest add @minidev/plan-comparisonCode Plan comparison table with features as rows and plans as columns, showing check or dash icons for booleans and text for values. Scrolls on mobile.
npx shadcn@latest add @minidev/comparison-tableCode A Monthly and Yearly billing period switch built on a segmented control, with a Save 20% with yearly note underneath. Pairs with pricing tables and plan cards.
npx shadcn@latest add @minidev/pricing-toggleCode Feature Comparison
motionA free versus premium comparison table with check, dash or text cells whose rows fade in on scroll. Pass an array of rows to compare plan features.
npx shadcn@latest add @minidev/feature-comparisonCode Frequently asked questions
How do I add a monthly and yearly toggle?
PricingToggle and PricingTable work together: keep the billing period in state, pass it to the table and show the yearly price with the discount. The pricing page guide walks through it with Stripe price ids.
Which pricing layout converts best?
Three plans with the recommended one visually raised, one line of who each plan is for, and the full comparison table below the fold. Hide nothing people need to decide, and make the free or trial action obvious.