Dev Design LibraryReact Pricing Card Components
Dev Design Library indexes 55 React pricing card components from 14 open-source UI libraries, with the most coming from FLX UI, Watermelon UI, Spectrum UI, Tremor Blocks and Origin 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 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
Changeable Pricing SectionWatermelon UI · React
Pricing ToggleUI Lab · ReactEach digit rolls to its new price on its own, and new digits grow in.
Pricing SectionROI UI · ReactA pricing section with three plan cards.
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
Changeable Pricing Section BaseWatermelon UI · React
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 1Watermelon UI · React
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 2Watermelon UI · React
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 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 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 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 WidgetWatermelon UI · React
Comparison TableFLX UI · ReactComparison Table for Select a Plan.
Pricing Widget BaseWatermelon UI · React
Audience SegmentsFLX UI · ReactAudience Segments for Select a Plan.
Usage SliderFLX UI · ReactUsage Slider for Select a Plan.
Spotlight RecommendationFLX UI · ReactSpotlight Recommendation for Select a Plan.