Plan comparison
Compare meaningful differences between plans and billing periods.
pnpm dlx shadcn@latest add @uiarc/plan-comparisonLive block · sample data
- Comparing two tiers side by side with a feature matrix.
- Pricing pages that switch between monthly and yearly prices.
- Long feature lists where people want to see only the differences.
- Use usage-pricing when price depends on seats or volume.
- Use segmented-control alone for a simple billing toggle.
- Use cancel-flow for downgrade or cancellation decisions.
Installation
Add Plan comparison with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/plan-comparisonAdds the block and its local dependencies, and installs motion, lucide-react. First time? Add the @uiarc registry to components.json, or use the full URL:
Usage
Use this when people need to weigh plans side by side. Replace the sample features and prices with your current offering.
example.tsx
import { PlanComparison } from "@/components/arc/blocks/plan-comparison/plan-comparison"; export function PricingPage() { return <PlanComparison />;}PlanComparison
A Team vs Studio comparison with a monthly or yearly toggle, animated prices, and a feature matrix. Takes no props; plans, prices, and features are sample data in the file.
No props.
- The matrix uses table, row, columnheader, rowheader, and cell roles.
- Prices are aria-live with aria-atomic so the full value is read.
- The chosen plan is announced in a role="status" footer.
- Prices count between billing periods and the selection highlight moves with layoutId.
- Extra feature rows expand in height with a light blur.
- Reduced motion jumps to the final values and disables height animation.
- Below 640px the feature header column hides and each feature name spans the row above its two values.
- Below 365px plan and value padding tighten so both plans still fit side by side.
- Prices tween with a single animate call per value; the selection highlight uses one layoutId.
- Showing extra rows animates height, so keep the matrix to a few dozen features.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use when people compare two tiers side by side.
- Edit the pricing and features constants; there is no selection callback, so wire the Button onClick yourself.
- Composes Arc Button, SegmentedControl, and Switch.
The full library index for assistants is at /llms.txt.
Checkout summaryProBlockAn order summary with a promo code that becomes a chip, discount and tax lines, and pay button states.
Live checkoutProBlockA subscription checkout whose summary recomputes as you edit, then glides to the centre and unfolds into a receipt.Seat managerProBlockA team seats and billing card where avatars and a seat meter show members, invites and open seats against what you pay for, a stepper rolls the prorated charge for today and the new monthly total live, and changes go through a confirm step before anyone is charged. Pending invites can be resent or revoked with undo, and when every seat is taken the card says so and offers to add one.