shadcn/ui Pricing Card Components
Dev Design Library indexes 21 shadcn/ui pricing card components from 5 open-source UI libraries, with the most coming from FLX UI, Watermelon UI, Velora UI, Spectrum UI and D2Studio UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. They follow the shadcn/ui conventions, so most install with the shadcn CLI and drop into a Tailwind project. Pricing card components belong to the Commerce group.
Sales CTA FooterSpectrum UI · ReactA seat slider that prices a tier live, beside the link grid.
Pricing 1Watermelon UI · React
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
Pricing 2Watermelon 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.
Pricing 3Watermelon 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.
Pricing 4Watermelon UI · React
Plan OverviewFLX UI · ReactPlan Overview for Manage Subscription.
Pricing 5Watermelon UI · React
Change PlanFLX UI · ReactChange Plan for Manage Subscription.
Cancel FlowFLX UI · ReactCancel Flow for Manage Subscription.
Tiered CardsFLX UI · ReactTiered Cards for Select a Plan.
Comparison TableFLX UI · ReactComparison Table for Select a Plan.
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.