51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:T21a1,'use client'; import { useEffect, useId, useState } from 'react'; import Link from 'next/link'; import { motion, MotionValue, motionValue, useSpring, useTransform, } from 'motion/react'; import useMeasure from 'react-use-measure'; import React from 'react'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { cn } from '@/lib/utils'; export type Plan4 = { id: string; name: string; description: string; tags: string[]; targetedFor: string; credits: string; monthly: number | 'Custom'; yearly: number | 'Custom'; ctaLabel: string; ctaHref: string; pastel: 'rose' | 'amber' | 'sky' | 'violet' | 'emerald' | 'lime'; }; const DEFAULT_PLANS: Plan4[] = [ { id: 'starter', name: 'Starter Plan', description: 'Kickstart your workflow with essential tools tailored for lean teams.', tags: ['Resume AI', 'Analytics'], targetedFor: 'Startups, Small Teams', credits: '100 / month', monthly: 0, yearly: 0, ctaLabel: 'Get Started', ctaHref: '#', pastel: 'rose', }, { id: 'pro', name: 'Growth Plan', description: 'Scale automation with deeper analytics, ATS workflows, and compliance reports.', tags: ['AI Interviews', 'ATS', 'Compliance'], targetedFor: 'Growing Businesses', credits: '200 / month', monthly: 119, yearly: 97, ctaLabel: 'Get Started', ctaHref: '#', pastel: 'amber', }, { id: 'enterprise', name: 'Enterprise Plan', description: 'White-label controls, custom SLAs, and dedicated pods for global organizations.', tags: ['White-label', 'Custom SLA'], targetedFor: 'Large Enterprises', credits: 'Unlimited', monthly: 'Custom', yearly: 'Custom', ctaLabel: 'Contact Sales', ctaHref: '#', pastel: 'sky', }, ]; // Light mode: true pastels. Dark mode: vibrant mid-opacity tints on dark surfaces. const pastelBg: Record = { rose: 'bg-rose-200/80 dark:bg-rose-400/[0.22]', amber: 'bg-amber-200/80 dark:bg-amber-400/[0.22]', sky: 'bg-sky-200/80 dark:bg-sky-400/[0.22]', violet: 'bg-violet-200/80 dark:bg-violet-400/[0.22]', emerald: 'bg-emerald-200/80 dark:bg-emerald-400/[0.22]', lime: 'bg-lime-200/80 dark:bg-lime-400/[0.22]', }; const pastelBadgeVariant: Record< Plan4['pastel'], React.ComponentProps['variant'] > = { rose: 'rose', amber: 'amber', sky: 'sky', violet: 'violet', emerald: 'emerald', lime: 'lime', }; const SPRING = { type: 'spring' as const, stiffness: 280, damping: 18, mass: 0.3, }; function Digit({ value, place }: { value: number; place: number }) { const rounded = Math.floor(value / place) % 10; const initial = motionValue(rounded); const anim = useSpring(initial, SPRING); useEffect(() => { anim.set(rounded); }, [anim, rounded]); return (

{Array.from({ length: 10 }, (_, i) => ( ))}

); } function Slot({ mv, number }: { mv: MotionValue; number: number }) { const id = useId(); const [ref, bounds] = useMeasure(); const y = useTransform(mv, (latest) => { if (!bounds.height) return 0; const offset = (10 + number - (latest % 10)) % 10; return offset > 5 ? (offset - 10) * bounds.height : offset * bounds.height; }); if (!bounds.height) { return ( {number} ); } return ( {number} ); } function SlidingNumber({ value }: { value: number }) { const digits = Math.abs(value).toString().split(''); const intVal = parseInt(digits.join(''), 10); const places = digits.map((_, i) => Math.pow(10, digits.length - i - 1)); return (

{digits.map((_, i) => ( ))}

); } function BillingToggle({ yearly, onToggle, }: { yearly: boolean; onToggle: () => void; }) { return ( ); } function InfoRow({ label, value }: { label: string; value: string }) { return (

{label} {value}

); } function PricingCard({ plan, yearly }: { plan: Plan4; yearly: boolean }) { const raw = yearly ? plan.yearly : plan.monthly; return (

{/* Tags */}

{plan.tags.map((tag) => ( {tag} ))}

{/* Spacer */}

{/* Plan info */}

{plan.name}

{plan.description}

{/* Rows */}

{/* Animated price row */}

Price {raw === 'Custom' ? ( 'Custom' ) : raw === 0 ? ( 'Free' ) : ( $ /mo )}

{/* CTA */}

); } export default function Pricing4({ plans = DEFAULT_PLANS, label = 'Pricing Plans', yearlyLabel = 'Billed yearly (18% OFF)', defaultYearly = false, }: { plans?: Plan4[]; label?: string; yearlyLabel?: string; defaultYearly?: boolean; }) { const [yearly, setYearly] = useState(defaultYearly); return (

{label}

setYearly((y) => !y)} /> {yearlyLabel}

{plans.map((plan) => ( ))}

); } 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}],["$","li","react-use-measure",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/react-use-measure","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"react-use-measure"}]]}]}]]}],["$","$L51",null,{"registryDependencies":["button","badge"]}]]}],["$","$L52",null,{"sourceUrl":"https://www.odysseyui.com/r/components-pricings-pricing-4.json","proxyUrl":"https://shadcnregistry.com/r/odysseyui/components-pricings-pricing-4","itemId":"@odysseyui/components-pricings-pricing-4"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"registry/components/pricings/pricing-4/index.tsx","content":"$54","type":"registry:ui","target":"components/odysseyui/pricing-4.tsx"}]}]]}],"$L55"]}]

Pricing 4

Installation

Files

components

Styles