Plan comparison
Compare meaningful differences between plans and billing periods.
npm install https://animui.stracture.net/__local/package.tgz- 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
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { PlanComparison } from 'animui/plan-comparison';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
Use this when people need to weigh plans side by side. Replace the sample features and prices with your current offering.
import { PlanComparison } from "animui/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 animui Button, SegmentedControl, and Switch.
The full library index for assistants is at /llms.txt.