Plan Comparison
A compact plan comparison: tap a plan header to focus its column, with checks, dashes and limits per feature row.
plan-compare.tsxplan-compare.css
Checking access…
Overview
Three plans across, features down. Tapping a plan highlights its column and updates the CTA; on phones the other columns narrow so the chosen one reads clearly.
Rows can hold a tick, a dash or a short value like “10 GB”. Feature groups collapse.
When to use
- Pricing pages, upgrade modals.
When not to use
- More than four plans: use separate cards.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/plan-compare.json$
npx shadcn@latest add https://sundaeui.dev/r/plan-compare.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/plan-compare.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/plan-compare.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy plan-compare.tsx and plan-compare.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { PlanCompare } from '@/components/sundae/plan-compare'
<PlanCompare />Props
| Prop | Type | Default |
|---|---|---|
plans*Columns. | { id: string; name: string; price: string }[] | — |
rows*Feature rows. | { label: string; values: (boolean | string)[] }[] | — |
defaultPlanHighlighted plan. | string | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- A real table with column headers as buttons (aria-pressed); ticks and dashes have text alternatives (“Included”, “Not included”).
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-plc; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Plan Comparison free?
- Plan Comparison is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Plan Comparison?
- Run npx shadcn@latest add https://sundaeui.dev/r/plan-compare.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Plan Comparison support keyboard and screen readers?
- A real table with column headers as buttons (aria-pressed); ticks and dashes have text alternatives (“Included”, “Not included”). Reduced motion removes the movement and keeps every state change.
- Does Plan Comparison respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All checkout →- Pro
Billing Toggle
Checkout · Refined - Pro
Seat Pricing
Checkout · Refined - Pro
Seat Checkout
Checkout · Understated - Pro
Trial Countdown
Checkout · Refined - Pro
Tender Checkout
Checkout · Refined - Pro
Currency Swap
Checkout · Refined