OdysseyUI

Pricing 5

Horizontal list-style pricing layout with accent icon blobs, strikethrough original prices, and optional recommended badge.

Loading...

Installation

Usage

import Pricing5 from '@/components/odysseyui/pricing-5';

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

Customisation

Pass a plans array to override the default plans:

import Pricing5, { type Plan5 } from '@/components/odysseyui/pricing-5';

const plans: Plan5[] = [
  {
    id: 'starter',
    name: 'Starter',
    features: ['5 projects', '10 GB storage', 'Email support'],
    price: '$9/month',
    ctaLabel: 'Get started',
    ctaHref: '/checkout/starter',
    accent: 'blue',
  },
  {
    id: 'pro',
    name: 'Pro',
    features: ['Unlimited projects', '100 GB storage', 'Priority support'],
    originalPrice: '$29',
    price: '$19/month',
    ctaLabel: 'Start free trial',
    ctaHref: '/checkout/pro',
    recommended: true,
    accent: 'violet',
  },
];

export default function Page() {
  return (
    <Pricing5
      plans={plans}
      title="Choose your plan"
      subtitle="Cancel any time."
    />
  );
}

How It Works

  • Each plan renders as a horizontal card (flex-row on sm+) with a gradient accent blob on the left and pricing + CTA on the right.
  • The accent blob is a simple div styled with a bg-linear-to-b gradient matching the plan's accent colour.
  • originalPrice, when provided, renders with a line-through decoration next to the current price.
  • The recommended flag adds a Badge next to the plan name.

API Reference

Pricing5

PropTypeDefault
plans?
Plan5[]
default two-plan array
title?
string
"Organize without limits"
subtitle?
string
"Local or cloud — your choice"

Plan5

PropTypeDefault
id
string
-
name
string
-
features
string[]
-
price
string
-
ctaLabel
string
-
ctaHref
string
-
originalPrice?
string
-
recommended?
boolean
-
recommendedLabel?
string
"Recommended"
billingNote?
string
-
accent?
"neutral" | "orange" | "blue" | "violet" | "emerald" | "rose" | "yellow"
"neutral"

Built by Shr3kx & iam-sahil. The source code is available on GitHub.

Last updated: 4/4/2026