# Marketing Pricing

Public pricing page section with monthly and annual billing toggle, three or four plans and a most popular badge.

- id: `marketing-pricing`
- Page: https://agentic-ui-kit.com/components/marketing-pricing
- Live preview: https://agentic-ui-kit.com/live/component/marketing-pricing?piece=marketing-pricing

## Install

```bash
agentic-ui add marketing-pricing
npx shadcn@4.17.0 add @agentic-ui/marketing-pricing
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** billing-cycle-toggle, annual-savings, highlighted-plan, quote-based-plan, price-morph, controlled-and-uncontrolled, currency-locale, dark-mode
- **Intents:** explore-detail, execute-flow
- **Suits domains:** marketing, saas, billing, devtools, ai-agents
- **Interaction:** toggle, click, keyboard-arrows
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** public pricing page section with monthly and annual billing toggle, three or four plans and a most popular badge, landing page pricing block that links each plan to signup or contact sales, pricing teaser on a SaaS homepage with a free tier and a custom enterprise tier
- **Avoid when:** in-app plan management for a signed-in customer (use billing-plan-comparison or billing-pricing-table), checkout or payment collection (use billing-checkout-flow), row-by-row feature comparison across many plans
- **Preserve when adapting:** radio-toggle, price-announcement, pricing-model
- **Replace when adapting:** plans, currency, copy, cta-links
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** @agentic-ui/motion-number-morph, lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives, motion-number-morph