Pricing 6

Installation

Usage

import Pricing6 from '@/components/odysseyui/pricing-6';

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

Customisation

Supply your own plan arrays via individualPlans and teamsPlans:

import Pricing6, { type Plan6 } from '@/components/odysseyui/pricing-6';

const myPlans: Plan6[] = [
  {
    id: 'starter',
    name: 'Starter',
    description: 'Everything you need to get started.',
    palette: 'blue',
    originalPrice: '$199',
    price: '$99',
    priceNote: 'One-time payment',
    ctaLabel: 'Buy now',
    ctaHref: '/checkout/starter',
    features: ['5 projects', 'Email support', 'Access to all components'],
  },
];

export default function Page() {
  return <Pricing6 individualPlans={myPlans} teamsPlans={myPlans} />;
}

How It Works

• A pill-shaped tab switcher toggles between the individuals and teams plan arrays.
• Each PlanCard renders a coloured header panel (base class) with two blurred blob divs and an inline SVG grain filter for depth.
• An Avatar orb (squircle, sm) uses the palette's avatarColor to match the card colour scheme.
• featuredLabel, when provided, renders as a frosted-glass pill badge beside the avatar.
• ctaDark swaps the CTA button from a frosted-white style to bg-foreground (true dark), useful for a hero/featured plan.
• Feature items are rendered with Tick02Icon from Hugeicons at reduced opacity.
• Optional footerNote / footerDesc appear below a divider line at the card bottom.

API Reference

Pricing6

Plan6