# PricingSection

> This Pricing component is a fully configurable, reusable section designed to showcase subscription plans for a product or service. It allows you to define multiple plans, each with a title, price, billing period, description, a list of features, and optional badges like “Popular” or “Enterprise.” The component uses a modern card layout with a glass-like header effect, clean typography, and responsive design, ensuring that it looks polished on both desktop and mobile.  The component also separates concerns by using subcomponents such as Card, Header, Price, MainPrice, Period, List, ListItem, and Separator, making it easy to customize styles, add or remove features, and integrate with other UI elements. This design is ideal for SaaS products, apps, or platforms that need a flexible, visually appealing pricing table that clearly communicates value to potential customers.  The demo page further demonstrates how to populate the component dynamically with an array of plans, including varying features, badges, and pricing tiers, making it straightforward to adapt for small teams, freelancers, or large enterprises.

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

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/pricing-section-1?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