# 10 Pricing Section Components for React & Tailwind

> Pricing sections for SaaS and subscription products: monthly and yearly toggles with rolling prices, seat and usage sliders, full feature comparison matrices, add-on builders, credit packs and enterprise contact cards.

3 of 10 free (the rest with PixelPapa Pro), built with Tailwind CSS and Motion, installable with the shadcn CLI.

- [Pricing Addon Builder](https://pixelpapa.com/components/pricing/pricing-addon-builder.md) (Pro): Build a plan by switching add-ons on and off; each one slides onto a receipt and the running total rolls to its new value.
- [Pricing Comparison Matrix](https://pixelpapa.com/components/pricing/pricing-comparison-matrix.md) (Pro): A feature-by-feature plan table with a sticky plan header, grouped rows, a column that highlights on hover and checkmarks that draw themselves in.
- [Pricing Credits Packs](https://pixelpapa.com/components/pricing/pricing-credits-packs.md): Pay-as-you-go credit packs as radio cards with growing coin stacks, a best-value corner ribbon and a selection ring that glides to the chosen pack.
- [Pricing Currency Switcher](https://pixelpapa.com/components/pricing/pricing-currency-switcher.md) (Pro): Three plans in one divided panel with a hand-built currency menu; choosing a currency counts every price to its localised amount.
- [Pricing Enterprise Contact](https://pixelpapa.com/components/pricing/pricing-enterprise-contact.md) (Pro): Two self-serve plans beside an inverted enterprise card with a named contact and a short form that morphs into a confirmation.
- [Pricing Horizontal Rows](https://pixelpapa.com/components/pricing/pricing-horizontal-rows.md): An editorial price list: each plan is a full-width row with a serif name, and an inverted fill wipes up from the bottom edge on hover.
- [Pricing Single Plan Spotlight](https://pixelpapa.com/components/pricing/pricing-single-plan-spotlight.md): One plan presented large inside a slowly rotating gradient border, with a staggered included list, crossed-out extras and a money-back guarantee.
- [Pricing Sliding Toggle](https://pixelpapa.com/components/pricing/pricing-sliding-toggle.md) (Pro): Three plans with a monthly / yearly switch; prices roll to their new value and the popular plan is lifted.
- [Pricing Tier Tabs](https://pixelpapa.com/components/pricing/pricing-tier-tabs.md) (Pro): Audience tabs for individuals, teams and enterprise; the pill slides between tabs and the matching pair of plans blurs in from the side.
- [Pricing Usage Slider](https://pixelpapa.com/components/pricing/pricing-usage-slider.md) (Pro): Drag the seat slider and the monthly total recalculates with rolling digits while the matching volume tier lights up.