# Pricing Module

> The PricingModule component is a fully configurable, responsive pricing section built with shadcn/ui, Lucide icons, and Tailwind CSS. It allows users to easily toggle between monthly and yearly billing, updating prices instantly for a seamless and dynamic experience. Designed for modern SaaS and product websites, it combines clarity, flexibility, and style — giving teams the ability to showcase multiple pricing tiers with detailed features and highlights.  Each pricing card is modular, allowing you to define the name, description, icon, pricing options, user limits, and features through props. The component also includes a recommended plan highlight, making it easy to emphasize the most popular or valuable tier. With clean transitions, adaptive theming for light and dark modes, and accessible UI components, the PricingModule serves as a polished and production-ready pricing layout for any digital platform.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@ruixen.ui/components/pricing-module

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/pricing-module?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt