"use client"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { useCallback, useMemo, useState, type CSSProperties, type ChangeEvent, type ReactNode, } from "react"; import { Counter } from "../../counter"; import { CARD_FADE, DEFAULT_USAGE, DarkButton, EASE_OUT, Eyebrow, FeaturedRing, PricingStyles, SecondaryButton, VIEWPORT, type PricingUsageStop, } from "../pricing-shared/pricing-shared"; export interface Pricing5Props { /** Eyebrow above the heading. @default "Pricing · usage based" */ eyebrow?: string; /** Heading content. */ heading?: ReactNode; /** Usage tier stops along the slider. */ usage?: PricingUsageStop[]; /** Starting slider tier index. @default 2 */ defaultTier?: number; className?: string; } /** * Usage-based pricing — left rail of trust points, right card with a live * slider that animates the price (via `Counter`) and tier label on change. */ export function Pricing5({ eyebrow = "Pricing · usage based", heading, usage = DEFAULT_USAGE, defaultTier = 2, className, }: Pricing5Props) { const reduce = useReducedMotion() ?? false; const [tierIndex, setTierIndex] = useState(defaultTier); const stop = usage[tierIndex] ?? usage[0]; const progress = useMemo( () => (tierIndex / Math.max(1, usage.length - 1)) * 100, [tierIndex, usage.length], ); const onSlide = useCallback((e: ChangeEvent) => { setTierIndex(Number(e.target.value)); }, []); return (

{eyebrow}

{heading ?? ( <> Pricing that scales
with your team. )}

One plan, three meters. Move them to match your actual usage and the price adjusts. Change tiers monthly — no commitment, no surprise overage.

{p.t}

{p.d}

{stop.name} tier · estimate Updated live

{stop.price === null ? ( Custom ) : stop.price === 0 ? ( Free ) : ( $ / month, billed monthly )}

Workspace size

{stop.name}

{usage.map((t) => ( {t.name} ))}

{[ { label: "Users", value: stop.users }, { label: "Projects", value: stop.projects }, { label: "Storage", value: stop.storage }, { label: "Support", value: stop.price === null ? "24/7 · 30m" : stop.price >= 199 ? "Priority · 2h" : stop.price === 0 ? "Community" : "Email", }, ].map((cell) => (

{cell.label}

{cell.value}

))}

{stop.price === null ? "Contact sales" : stop.price === 0 ? "Create workspace" : `Choose ${stop.name}`} Compare plans

); } Pricing5.displayName = "Pricing5";

{heading ?? ( <> Pricing that scales with your team. )}

{heading ?? ( <> Pricing that scales
with your team. )}

Pricing · Usage

Customize

Usage