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:T2952,'use client'; import { useEffect, useId, useState } from 'react'; import { motion, MotionValue, motionValue, useSpring, useTransform, } from 'motion/react'; import useMeasure from 'react-use-measure'; import { ArrowUpRight01Icon, CheckmarkBadge01Icon, CustomerService01Icon, } from '@hugeicons/core-free-icons'; import { HugeiconsIcon } from '@hugeicons/react'; import { Button } from '@/components/ui/button'; import { cn } from '@/lib/utils'; 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 CornerPlus({ className }: { className?: string }) { return ( ); } function BillingToggle({ yearly, onToggle, }: { yearly: boolean; onToggle: () => void; }) { return ( ); } export type Plan = { id: string; name: string; desc: string; credits: string; monthly: number; yearly: number; cta: string; featured: boolean; features: string[]; }; const DEFAULT_PLANS: Plan[] = [ { id: 'free', name: 'Starter', desc: 'Everything you need to explore. No card required, no strings attached.', credits: '1,000', monthly: 0, yearly: 0, cta: 'Get started', featured: false, features: [ '1,000 credits / month', '1 concurrent request', 'Community support', ], }, { id: 'pro', name: 'Pro', desc: 'Built for makers shipping real products. Flexible, fast, and reliable.', credits: '10,000', monthly: 29, yearly: 23, cta: 'Start free trial', featured: true, features: [ '10,000 credits / month', '10 concurrent requests', 'Email support', '$7 per extra 1k credits', ], }, { id: 'enterprise', name: 'Enterprise', desc: 'For teams that need reliability at scale. Custom limits, dedicated support.', credits: '500,000', monthly: 149, yearly: 119, cta: 'Contact sales', featured: false, features: [ '500,000 credits / month', 'Unlimited concurrent requests', 'Dedicated support', 'Custom rate limits', 'SLA guarantee', ], }, ]; export function Pricing1({ plans = DEFAULT_PLANS }: { plans?: Plan[] }) { const [yearly, setYearly] = useState(false); return (

{/* Header */}

Simple, transparent pricing

setYearly((y) => !y)} /> Billed yearly (18% OFF)

{plans.map((plan, i) => { const price = yearly ? plan.yearly : plan.monthly; const isFirst = i === 0; const isLast = i === plans.length - 1; return (

{plan.featured && ( <> )}

{plan.name} {plan.featured && ( Most popular )}

{plan.desc}

/month

{plan.features.map((f) => (

{f}

))}

); })}

Need help deciding?

Contact our support team for personalized recommendations and guidance.

); } export default Pricing1; 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"]}]]}],["$","$L52",null,{"sourceUrl":"https://www.odysseyui.com/r/components-pricings-pricing-1.json","proxyUrl":"https://shadcnregistry.com/r/odysseyui/components-pricings-pricing-1","itemId":"@odysseyui/components-pricings-pricing-1"}],["$","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-1/index.tsx","content":"$54","type":"registry:ui","target":"components/odysseyui/pricing-1.tsx"}]}]]}],"$L55"]}]

Pricing 1

Installation

Files

components

Styles