Odometer Pricing

When to use

• A SaaS pricing section with monthly and annual billing
• Three plans where one is the clear recommendation

When not to use

• More than three plans, or plans that need a feature-comparison table
• Usage-based pricing where a fixed monthly figure would mislead

Installation

Add Odometer Pricing with the shadcn CLI — it writes the files into components/blocx/ and installs what they import — or copy it in by hand.

Requires React 19 · motion.

pnpm dlx shadcn@latest add "https://www.pinui.xyz/r/blocx/odometer-pricing.json"

Usage

import OdometerPricing from "@/components/blocx/OdometerPricing";

export default function Page() {
  return <OdometerPricing />;
}

API reference

OdometerPricing

Takes no props — drop it in as it is.

The plans, prices and features are the PLANS list at the top of OdometerPricing.tsx; annual is quoted 20% off.

Accessibility

• The billing switch is a radio group; each price reads as one phrase — "$99 per month, billed yearly" — while its digits roll
• On phones the plan dots are tabs with labels, and the popular plan opens first
• The grain and light trail are decorative and aria-hidden

Motion

• Switching billing rolls every price like an odometer, digit by digit
• A short, faint light trail follows a mouse across the popular plan — fine pointers only
• Reduced motion swaps prices without rolling and turns the trail off

Responsive behavior

• Everything is sized from one unit so the stage fits the viewport height
• Below 1024px in portrait the plans become a swipeable row that opens on the popular one