Dev Design LibraryTailwind CSS Pricing Card Components
Dev Design Library indexes 77 Tailwind CSS pricing card components from 16 open-source UI libraries, with the most coming from Oxbow UI, FLX UI, Watermelon UI, Spectrum UI and Tremor Blocks. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list styles its components with Tailwind CSS utility classes. Pricing card components belong to the Commerce group.
Comp 164Origin UI · React
Banner TiersSpectrum UI · ReactA brutalist plan table whose featured column wears a blue banner on top.
Pricing SectionVengeance UI · ReactThree-tier pricing with a sliding billing switch, rolling prices, and accent-lit cards
Pricing ColumnLaunch UI · React
Toggle Pricing CardsOpenSourceUI · React
Paywalluselayouts · ReactA premium paywall component with a pick your price detent slider, animated numeric price transitions, and a segmented…
Pricing 01Componentry · ReactThree tactile pricing cards with revealed hover notes, clear feature lists, and a highlighted popular plan.
Pricing Section 01Tremor Blocks · React
Pricing Fivecnblocks · SveltePricing table with feature comparison
Pricing 01Oxbow UI · AstroPricing section with two tiers
Changeable Pricing SectionWatermelon UI · React
Pricing Foursv-efferd · SvelteAn animated pricing table with monthly-yearly toggles, live number transitions, and motion badges.
Pricing ToggleUI Lab · ReactEach digit rolls to its new price on its own, and new digits grow in.
PricingFLX UI · ReactHighlighted plan with a Popular badge and feature checklist.
Pricing comparison tableVelora UI · ReactGrouped feature comparison table with a sticky plan header, and per-plan tabs on mobile.
Pricing CardsD2Studio UI · ReactResponsive three-tier pricing cards with feature comparison and popular plan highlighting
Comp 166Origin UI · React
Blueprint TiersSpectrum UI · ReactA Swiss-style pricing table with crop marks, mono labels, and a royal-blue accent.
Pricing TiersVengeance UI · ReactMonochrome three-tier pricing with a dark featured card, mono labels, and an enterprise row
Pricing SectionLaunch UI · React
Pricing Carduselayouts · ReactA focused pricing card layout with clear hierarchy.
Pricing 02Componentry · ReactA compact pricing table with separated plan summaries, detailed feature lists, and an animated billing-cycle switch.
Pricing Section 02Tremor Blocks · React
Pricing Fourcnblocks · SvelteFour-tier pricing with toggle switch
Pricing 03Oxbow UI · AstroPricing section with four tiers
Changeable Pricing Section BaseWatermelon UI · React
Pricing Onesv-efferd · SvelteA two-plan comparison with corner accents, compact savings callouts, and a stronger featured tier.
SelectableFLX UI · ReactClickable plan cards with a ring and check on the active one.
Single plan pricingVelora UI · ReactOne all-inclusive plan card beside a benefit list and short reassurance answers.
Comp 170Origin UI · React
Dark MatrixSpectrum UI · ReactA dark comparison table with dashed rows, mint checks, and per-plan CTA pills.
Pricing Section 03Tremor Blocks · React
Pricing Onecnblocks · SvelteSimple three-tier pricing cards
Pricing 04Oxbow UI · AstroSingle usage based pricing card
Pricing 1Watermelon UI · React
Pricing Threesv-efferd · SvelteA reusable three-tier pricing layout with icon-led cards and a highlighted middle plan.
Pricing tiersFLX UI · ReactStacked tier rows with Popular badge, price, and CTA button.
Three-tier pricingVelora UI · ReactThree plan cards with a monthly/yearly switch, a savings badge and a highlighted middle plan.
Comp 259Origin UI · React
Gradient TiersSpectrum UI · ReactPastel gradient card headers with icons and color-coded inheritance labels.
Pricing Section 04Tremor Blocks · React
Pricing Threecnblocks · SveltePricing with highlighted popular plan
Pricing 06Oxbow UI · AstroPricing section with three tiers and table
Pricing 2Watermelon UI · React
Pricing Twosv-efferd · SvelteA bordered editorial pricing grid with divider rails, concise plan summaries, and feature checklists.
Plan OverviewFLX UI · ReactPlan Overview for Manage Subscription.
Offset TiersSpectrum UI · ReactStaggered serif panels on a dot grid, with one entry price and expert CTAs.
Pricing Section 05Tremor Blocks · React
Pricing Twocnblocks · SvelteTwo-column pricing with monthly/yearly toggle
Pricing 07Oxbow UI · AstroPricing section with 2 tiers and 2 support tiers
Pricing 3Watermelon UI · React
Change PlanFLX UI · ReactChange Plan for Manage Subscription.
Receipt TiersSpectrum UI · ReactPlans printed as thermal receipts with torn edges, dotted leaders, and a rubber stamp.
Pricing Section 06Tremor Blocks · React
Pricing 08Oxbow UI · AstroPricing section with 4 tiers
Pricing 4Watermelon UI · React
Cancel FlowFLX UI · ReactCancel Flow for Manage Subscription.
Sales CTA FooterSpectrum UI · ReactA seat slider that prices a tier live, beside the link grid.
Pricing Section 07Tremor Blocks · React
Pricing 10Oxbow UI · AstroPricing section with two columns comparison table
Pricing 5Watermelon UI · React
Tiered CardsFLX UI · ReactTiered Cards for Select a Plan.
Serif TiersSpectrum UI · ReactCream serif cards with a black featured card lit by a crimson glow.
Pricing Section 08Tremor Blocks · React
Pricing 02Oxbow UI · Astro
Pricing WidgetWatermelon UI · React
Comparison TableFLX UI · ReactComparison Table for Select a Plan.
Pricing 05Oxbow UI · Astro
Pricing Widget BaseWatermelon UI · React
Audience SegmentsFLX UI · ReactAudience Segments for Select a Plan.
Pricing 09Oxbow UI · Astro
Usage SliderFLX UI · ReactUsage Slider for Select a Plan.
Pricing 11Oxbow UI · Astro
Spotlight RecommendationFLX UI · ReactSpotlight Recommendation for Select a Plan.
Pricing Pages 01Oxbow UI · Astro
Pricing Pages 02Oxbow UI · Astro
Pricing Pages 03Oxbow UI · Astro