Dev Design LibraryReact Pricing Section Components
Dev Design Library indexes 40 React pricing section components from 15 open-source UI libraries, with the most coming from Watermelon UI, Tremor Blocks, Spectrum UI, Componentry and Vengeance UI. 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 targets React. Pricing section components belong to the Commerce group.
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 SectionLaunch UI · React
Calendar 15 - With PricingShadcn Space · ReactCalendar component
LandingBoardUI · React
Pricing 01Componentry · ReactThree tactile pricing cards with revealed hover notes, clear feature lists, and a highlighted popular plan.
Pricing Section 01Tremor Blocks · React
Template LandingShark UI · React
Changeable Pricing SectionWatermelon UI · React
Plan comparisonArc Library · ReactCompare meaningful differences between plans and billing periods.
Pricing CalculatorUI Lab · ReactItemizes your bill like an invoice and upgrades the plan the moment your team crosses a seat threshold.
Pricing SectionROI UI · ReactA pricing section with three plan cards.
Single plan pricingVelora UI · ReactOne all-inclusive plan card beside a benefit list and short reassurance answers.
Odometer PricingPin UI · React
Pricing CardsD2Studio UI · ReactResponsive three-tier pricing cards with feature comparison and popular plan highlighting
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 02Componentry · ReactA compact pricing table with separated plan summaries, detailed feature lists, and an animated billing-cycle switch.
Pricing Section 02Tremor Blocks · React
Changeable Pricing Section BaseWatermelon UI · React
Three-tier pricingVelora UI · ReactThree plan cards with a monthly/yearly switch, a savings badge and a highlighted middle plan.
Smart PricingPin 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 1Watermelon UI · React
Gradient TiersSpectrum UI · ReactPastel gradient card headers with icons and color-coded inheritance labels.
Pricing Section 04Tremor Blocks · React
Pricing 2Watermelon UI · React
Offset TiersSpectrum UI · ReactStaggered serif panels on a dot grid, with one entry price and expert CTAs.
Pricing Section 05Tremor Blocks · React
Pricing 3Watermelon UI · React
Receipt TiersSpectrum UI · ReactPlans printed as thermal receipts with torn edges, dotted leaders, and a rubber stamp.
Pricing Section 06Tremor Blocks · React
Pricing 4Watermelon UI · React
Serif TiersSpectrum UI · ReactCream serif cards with a black featured card lit by a crimson glow.
Pricing Section 07Tremor Blocks · React
Pricing 5Watermelon UI · React
Pricing Section 08Tremor Blocks · React
Pricing WidgetWatermelon UI · React
Pricing Widget BaseWatermelon UI · React