{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "components-pricings-pricing-3",
  "title": "Pricing 3",
  "description": "Asymmetric three-column pricing with elevated featured plan, amber badge, and security footer note.",
  "registryDependencies": [
    "button",
    "badge"
  ],
  "files": [
    {
      "path": "registry/components/pricings/pricing-3/index.tsx",
      "content": "'use client';\n\nimport Link from 'next/link';\nimport {\n  Tick02Icon,\n  SecurityCheckIcon,\n  MoneyBag01Icon,\n  Coins01Icon,\n} from '@hugeicons/core-free-icons';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport { Button } from '@/components/ui/button';\nimport { Badge } from '@/components/ui/badge';\n\nexport type Plan3 = {\n  id: string;\n  name: string;\n  price?: string;\n  priceNote?: string;\n  customPricing?: string;\n  description: string;\n  features: string[];\n  ctaLabel: string;\n  ctaHref: string;\n  featured?: boolean;\n  featuredLabel?: string;\n  footerNote?: string;\n};\n\nconst DEFAULT_PLANS: Plan3[] = [\n  {\n    id: 'hobby',\n    name: 'Hobby',\n    price: 'Free',\n    description: 'For most individuals',\n    features: [\n      'Up to 3 Blog posts',\n      'Up to 3 Transcriptions',\n      'Up to 3 Posts stored',\n      'Markdown support',\n      'Community support',\n      'AI powered suggestions',\n    ],\n    ctaLabel: 'Start For Free',\n    ctaHref: '#',\n  },\n  {\n    id: 'pro',\n    name: 'Pro',\n    price: '$20',\n    priceNote: 'per month',\n    description: 'For small businesses',\n    features: [\n      'Up to 500 Blog Posts',\n      'Up to 500 Transcriptions',\n      'Up to 500 Posts stored',\n      'Unlimited Markdown support',\n      'SEO optimization tools',\n      'Priority support',\n      'AI powered suggestions',\n    ],\n    ctaLabel: 'Get started',\n    ctaHref: '#',\n    featured: true,\n    featuredLabel: 'Best Value',\n    footerNote: 'Safe and secure',\n  },\n  {\n    id: 'enterprise',\n    name: 'Enterprise',\n    customPricing: 'Tailored pricing terms',\n    description: 'For large organizations',\n    features: [\n      'Unlimited Blog Posts',\n      'Unlimited Transcriptions',\n      'Unlimited Posts stored',\n      'Unlimited Markdown support',\n      'SEO optimization tools',\n      'Priority support',\n      'AI powered suggestions',\n    ],\n    ctaLabel: 'Contact team',\n    ctaHref: '#',\n  },\n];\n\nfunction FeatureList({ features }: { features: string[] }) {\n  return (\n    <ul className=\"space-y-3\">\n      {features.map((feature, i) => (\n        <li key={i} className=\"flex items-center gap-2.5 text-sm\">\n          <HugeiconsIcon\n            icon={Tick02Icon}\n            className=\"size-4 shrink-0 text-foreground/60\"\n            strokeWidth={2}\n          />\n          {feature}\n        </li>\n      ))}\n    </ul>\n  );\n}\n\nexport default function Pricing3({\n  plans = DEFAULT_PLANS,\n  title = 'Flexible plans that grow with you',\n  subtitle = 'Use Inbox individually or upgrade to link more accounts and add seats for your team members.',\n}: {\n  plans?: Plan3[];\n  title?: string;\n  subtitle?: string;\n}) {\n  const hobbyPlan =\n    plans.find((p) => !p.featured && plans.indexOf(p) === 0) ?? plans[0];\n  const featuredPlan = plans.find((p) => p.featured);\n  const enterprisePlan =\n    plans.find((p) => !p.featured && plans.indexOf(p) > 0) ?? plans[2];\n\n  return (\n    <div className=\"w-full space-y-4\">\n      <div className=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between md:gap-16\">\n        <h2 className=\"text-4xl font-bold tracking-tight md:max-w-xs\">\n          {title}\n        </h2>\n        <p className=\"text-sm leading-relaxed text-muted-foreground md:max-w-xs\">\n          {subtitle}\n        </p>\n      </div>\n\n      <div className=\"overflow-hidden rounded-2xl border border-border md:grid md:grid-cols-3\">\n        {hobbyPlan && (\n          <div className=\"flex flex-col gap-6 border-b border-border p-6 md:border-r md:border-b-0\">\n            <span className=\"text-sm text-muted-foreground\">\n              {hobbyPlan.name}\n            </span>\n            <div>\n              <div className=\"flex items-baseline gap-1.5\">\n                <span className=\"text-2xl font-bold tracking-tight\">\n                  {hobbyPlan.price}\n                </span>\n                {hobbyPlan.priceNote && (\n                  <span className=\"text-sm text-muted-foreground\">\n                    {hobbyPlan.priceNote}\n                  </span>\n                )}\n              </div>\n              <p className=\"mt-1.5 text-sm text-muted-foreground\">\n                {hobbyPlan.description}\n              </p>\n            </div>\n            <Button asChild variant=\"outline\" className=\"w-full\">\n              <Link href={hobbyPlan.ctaHref}>{hobbyPlan.ctaLabel}</Link>\n            </Button>\n            <FeatureList features={hobbyPlan.features} />\n          </div>\n        )}\n\n        {featuredPlan && (\n          <div className=\"flex flex-col items-stretch gap-4 border-b border-border bg-muted/50 p-1.5 md:border-r md:border-b-0\">\n            <div className=\"flex flex-col gap-6 rounded-xl border border-border bg-card p-6 dark:shadow-sm\">\n              <div className=\"flex items-center justify-between gap-2\">\n                <span className=\"text-sm font-medium text-foreground\">\n                  {featuredPlan.name}\n                </span>\n                {featuredPlan.featuredLabel && (\n                  <Badge variant=\"amber\">\n                    <HugeiconsIcon icon={MoneyBag01Icon} strokeWidth={3} />\n                    <span className=\"text-xs font-semibold\">\n                      {featuredPlan.featuredLabel}\n                    </span>\n                  </Badge>\n                )}\n              </div>\n              <div>\n                <div className=\"flex items-baseline gap-1.5\">\n                  <span className=\"text-2xl font-bold tracking-tight\">\n                    {featuredPlan.price}\n                  </span>\n                  {featuredPlan.priceNote && (\n                    <span className=\"text-sm text-muted-foreground\">\n                      {featuredPlan.priceNote}\n                    </span>\n                  )}\n                </div>\n                <p className=\"mt-1.5 text-sm text-muted-foreground\">\n                  {featuredPlan.description}\n                </p>\n              </div>\n              <Button asChild className=\"w-full\">\n                <Link href={featuredPlan.ctaHref}>{featuredPlan.ctaLabel}</Link>\n              </Button>\n              <FeatureList features={featuredPlan.features} />\n            </div>\n            {featuredPlan.footerNote && (\n              <div className=\"flex items-center justify-center gap-1.5 pb-2 text-xs text-muted-foreground\">\n                <HugeiconsIcon\n                  icon={SecurityCheckIcon}\n                  className=\"size-3 shrink-0\"\n                  strokeWidth={3}\n                />\n                {featuredPlan.footerNote}\n              </div>\n            )}\n          </div>\n        )}\n\n        {enterprisePlan && (\n          <div className=\"flex flex-col gap-6 p-6\">\n            <span className=\"text-sm text-muted-foreground\">\n              {enterprisePlan.name}\n            </span>\n            <div>\n              {enterprisePlan.customPricing ? (\n                <>\n                  <div className=\"flex items-center gap-1.5 text-sm font-medium\">\n                    <HugeiconsIcon\n                      icon={Coins01Icon}\n                      className=\"size-4 shrink-0\"\n                      strokeWidth={2}\n                    />\n                    {enterprisePlan.customPricing}\n                  </div>\n                  <p className=\"mt-1.5 text-sm text-muted-foreground\">\n                    {enterprisePlan.description}\n                  </p>\n                </>\n              ) : (\n                <>\n                  <div className=\"flex items-baseline gap-1.5\">\n                    <span className=\"text-3xl font-bold tracking-tight\">\n                      {enterprisePlan.price}\n                    </span>\n                    {enterprisePlan.priceNote && (\n                      <span className=\"text-sm text-muted-foreground\">\n                        {enterprisePlan.priceNote}\n                      </span>\n                    )}\n                  </div>\n                  <p className=\"mt-1.5 text-sm text-muted-foreground\">\n                    {enterprisePlan.description}\n                  </p>\n                </>\n              )}\n            </div>\n            <Button asChild variant=\"outline\" className=\"w-full\">\n              <Link href={enterprisePlan.ctaHref}>\n                {enterprisePlan.ctaLabel}\n              </Link>\n            </Button>\n            <FeatureList features={enterprisePlan.features} />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/odysseyui/pricing-3.tsx"
    }
  ],
  "type": "registry:ui"
}