Pricing comparisonPro
Plan comparison table with sticky headers, yearly toggle and a mobile plan picker.
What's inside
- Sticky plan headers
- Yearly toggle with rolling prices
- Collapsible groups and hints
- Mobile plan picker
When to use
- Pricing pages where plans differ in many ways.
When not to use
- Two simple plans: use the pricing section.
Installation
Usage
Import it from @/components/blocks/pricing-comparison after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.
example.tsx
import { PricingComparison } from "@/components/blocks/pricing-comparison";
export default function Page() {
return (
<main className="mx-auto max-w-6xl p-6">
<PricingComparison />
</main>
);
}API reference
PricingComparison
A plan comparison table with sticky plan headers, a yearly toggle with rolling prices, collapsible groups, hints and a mobile plan picker. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.
No props.
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Move through toggle, plans, groups and hints |
| ←or→ | Switch billing cycle |
| Enter | Collapse or expand a group |
Accessibility
- A real table with a caption, row and column headers.
- Ticks and dashes are labelled Included / Not included.
- Groups are buttons with aria-expanded.
Motion
- Prices roll when switching cycle; the mobile picker pill slides; groups fade in.
Responsive behavior
- Phones compare one plan at a time via the picker; all four columns from 768px.
Performance
- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.
Notes for AI
- Keep PLANS and GROUPS values in the same order.
This page as Markdown, for assistants and coding agents:
/blocks/pricing-comparison/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt