Pricing 1

Installation

Usage

import Pricing1 from '@/components/odysseyui/pricing-1';

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

How It Works

• Uses motion/react springs and react-use-measure to animate individual digit slots in the SlidingNumber component, so price transitions feel physical and smooth when toggling billing period.
• A custom BillingToggle switch (role="switch") controls the yearly state, which swaps each plan's monthly vs yearly price.
• The featured column receives CornerPlus SVG decorations at its four corners, rendered via translate offsets on the shared border grid.
• Feature check icons use @hugeicons/react (CheckmarkBadge01Icon).

API Reference

Pricing1

Plan