Pricing 2

Installation

Usage

import Pricing2 from '@/components/odysseyui/pricing-2';

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

How It Works

• Featured plan is wrapped in a bg-linear-to-br gradient border (p-0.5 trick) with a rounded-2xl outer shell and a bg-card inner content area.
• A "Most Popular" pill is absolutely positioned at the top of the featured card using negative top offset.
• A decorative SVG cursor illustration is pinned to the bottom-right corner of the featured card via absolute positioning.
• Non-featured plans use a subtle ring-1 ring-foreground/10 border for visual separation.
• All CTAs use Button asChild with <Link> for Next.js client-side navigation.

API Reference

Pricing2

Plan2