Pricing 4

Installation

Usage

import Pricing4 from '@/components/odysseyui/pricing-4';

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

Starting with yearly billing

<Pricing4
  defaultYearly
  label="Choose a plan"
  yearlyLabel="Annual billing (save 18%)"
/>

How It Works

• Each plan card gets a pastel background (pastelBg) and matching Badge variant (pastelBadgeVariant) derived from the plan's pastel color.
• The price display uses the same SlidingNumber / Digit / Slot spring animation system as Pricing 1 — digits animate individually via useSpring and useTransform from motion/react.
• BillingToggle is a custom accessible switch (role="switch", aria-checked) that animates its thumb with a spring.
• When monthly/yearly is "Custom", the price row renders the string "Custom" instead of the animated number.
• When the price is 0, it renders "Free".

API Reference

Pricing4

Plan4