# Two-Plan Diff Pricing Comparison Table

> Two-plan diff pricing comparison table for React and Tailwind CSS (shadcn/ui) that compares any two plans and shows only the rows that change, with color-coded upgrades and downgrades. It is built to help people decide on an upgrade in seconds instead of scanning a full feature matrix. Pick plans A and B from the chips, swap them, and read a summary of the price difference with upgrade and downgrade counts; shared rows stay collapsed until you expand them. Values are compared automatically for numbers, "Unlimited", booleans, and leading quantities, with an optional rank order for words and a lower-is-better flag for limits. Rows glide between the gain, lose, and same sections with a FLIP transition, and chart tokens tint the A/B chips and verdict cells. Supports controlled pair and visibility state, choose-plan callbacks, keyboard use, live-region summaries, reduced motion, and light and dark themes. Use it for SaaS pricing pages, upgrade dialogs, and in-app plan pickers. The included demo tours three sample pairs; the component makes no requests. Requires React and lucide-react, with no animation library.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Pricing, Comparison Table, Pricing Table, Upgrade, SaaS
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@dhxwhy/components/two-plan-diff-pricing-table

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/two-plan-diff-pricing-table?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 · More like this: https://21st.dev/community/components/s/pricing.md