# PricingSection

> The PricingSection component is a fully responsive, theme-adaptive pricing and services layout built entirely with shadcn/ui components and Tailwind CSS. It’s designed for startups, SaaS products, or agencies that want to clearly communicate their service tiers alongside descriptive content about their offerings.  The left column provides structured information about services, customization options, and support, giving context to potential clients before they view the plans. The right column displays modern pricing cards for different subscription tiers—Starter, Professional, and Enterprise—each featuring a list of key benefits, a highlighted plan for emphasis, and a prominent call-to-action button.  Built with accessibility and flexibility in mind, the component adapts seamlessly between light and dark themes, uses semantic typography, and remains highly readable across screen sizes. It’s ideal for landing pages, pricing sections, or service comparison areas, giving businesses a clean, professional way to showcase their value propositions.

- 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-section-2

## Install

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