{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"comparison-table","type":"registry:component","title":"Comparison table","description":"Plans side by side, with a column that glides to the plan under your pointer and prices that roll.","author":"Hairline UI","dependencies":[],"registryDependencies":["https://hairlineui.com/r/pricing-toggle.json"],"files":[{"path":"registry/comparison-table.tsx","type":"registry:component","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { Price, PricingToggle } from \"./pricing-toggle\";\n\n/* ─────────────────────────────────────────────────────────\n * COMPARISON TABLE: plans side by side, and one that stands out\n *\n * rest the recommended plan sits in a hairline column that\n * runs the height of the table\n * point move across the table and the column glides to the\n * plan under you with a little give, then settles\n * back when you leave\n * billing Monthly/Yearly is thrown to the choice and every\n * price rolls; the note under it slides the same way\n * groups each section folds open and shut to its height\n * phone one plan at a time: a switch is thrown to the plan\n * and its column slides in from the side you went\n *\n * Header stays at the top while the features scroll past.\n * ───────────────────────────────────────────────────────── */\n\nexport interface ComparisonPlan {\n id: string;\n name: string;\n /** Monthly price, or { monthly, yearly } per month; null for \"Custom\". */\n price: number | { monthly: number; yearly: number } | null;\n description?: string;\n /** The column that's highlighted at rest. */\n featured?: boolean;\n badge?: string;\n cta?: { label: string; href?: string; onClick?: () => void };\n}\n\nexport type ComparisonValue = boolean | string | number | null | undefined;\n\nexport interface ComparisonRow {\n label: string;\n hint?: string;\n values: Record;\n}\n\nexport interface ComparisonGroup {\n title: string;\n rows: ComparisonRow[];\n /** Start folded. */\n collapsed?: boolean;\n}\n\nexport interface ComparisonTableProps extends React.HTMLAttributes {\n plans: ComparisonPlan[];\n groups: ComparisonGroup[];\n currency?: string;\n /** Shows a Monthly/Yearly switch, e.g. \"Save 20%\". */\n yearlyBadge?: string;\n /** How far from the top the header sticks (e.g. under a fixed navbar). */\n stickyTop?: number;\n}\n\nconst EASE = \"cubic-bezier(0.16,1,0.3,1)\";\nconst THROW = \"cubic-bezier(0.34,1.36,0.64,1)\";\nconst FOCUS = \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background\";\n\nconst reducedQuery = \"(prefers-reduced-motion: reduce)\";\nconst subscribeReduced = (onChange: () => void) => {\n const query = window.matchMedia(reducedQuery);\n query.addEventListener(\"change\", onChange);\n return () => query.removeEventListener(\"change\", onChange);\n};\nconst useReducedMotion = () =>\n React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false);\n\nfunction Cell({ value }: { value: ComparisonValue }) {\n if (value === true)\n return (\n \n \n \n );\n if (value === false || value === null || value === undefined)\n return (\n \n \n \n );\n return {value};\n}\n\nexport function ComparisonTable({ plans, groups, currency = \"USD\", yearlyBadge, stickyTop = 0, className = \"\", ...props }: ComparisonTableProps) {\n const reduced = useReducedMotion();\n const id = React.useId();\n const [billing, setBilling] = React.useState(\"monthly\");\n const [billingDir, setBillingDir] = React.useState(1);\n const [hover, setHover] = React.useState(null);\n const [selected, setSelected] = React.useState(() => Math.max(0, plans.findIndex((p) => p.featured)));\n const [dir, setDir] = React.useState(1);\n const [open, setOpen] = React.useState(() => groups.map((g) => !g.collapsed));\n const [cols, setCols] = React.useState<{ left: number; width: number }[]>([]);\n const [ready, setReady] = React.useState(false);\n const headRefs = React.useRef<(HTMLDivElement | null)[]>([]);\n const headerRef = React.useRef(null);\n const [headerHeight, setHeaderHeight] = React.useState(0);\n const switchRefs = React.useRef<(HTMLButtonElement | null)[]>([]);\n const [thumb, setThumb] = React.useState({ left: 0, width: 0 });\n\n const featured = plans.findIndex((p) => p.featured);\n const lit = hover ?? (featured >= 0 ? featured : null);\n const template = `minmax(9.5rem,1.35fr) repeat(${plans.length}, minmax(0,1fr))`;\n\n // Where each plan's column is, so the highlight can glide between them.\n React.useLayoutEffect(() => {\n const measure = () => {\n const next = headRefs.current.map((el) => ({ left: el?.offsetLeft ?? 0, width: el?.offsetWidth ?? 0 }));\n setCols((c) => (c.length === next.length && c.every((x, i) => x.left === next[i].left && x.width === next[i].width) ? c : next));\n setHeaderHeight((h) => (h === headerRef.current?.offsetHeight ? h : (headerRef.current?.offsetHeight ?? 0)));\n };\n measure();\n const observer = new ResizeObserver(measure);\n headRefs.current.forEach((el) => el && observer.observe(el));\n if (headerRef.current) observer.observe(headerRef.current);\n const frame = requestAnimationFrame(() => setReady(true));\n return () => {\n observer.disconnect();\n cancelAnimationFrame(frame);\n };\n }, [plans.length]);\n\n // The phone switch's thumb.\n React.useLayoutEffect(() => {\n const el = switchRefs.current[selected];\n if (el) setThumb((t) => (t.left === el.offsetLeft && t.width === el.offsetWidth ? t : { left: el.offsetLeft, width: el.offsetWidth }));\n }, [selected, plans.length]);\n\n const pick = (i: number) => {\n setDir(i >= selected ? 1 : -1);\n setSelected(i);\n };\n\n const onMove = (e: React.PointerEvent) => {\n if (e.pointerType === \"touch\") return;\n const x = e.clientX - (e.currentTarget as HTMLElement).getBoundingClientRect().left;\n const i = cols.findIndex((c) => x >= c.left - 6 && x <= c.left + c.width + 6);\n setHover(i >= 0 ? i : null);\n };\n\n const column = lit !== null ? cols[lit] : undefined;\n const glide = ready && !reduced ? `transform 520ms ${THROW}, width 420ms ${EASE}, opacity 300ms ${EASE}` : \"none\";\n // On a phone only the chosen plan shows; it slides in from the side you went.\n const phone = (i: number) => (i === selected ? `max-sm:block ${dir > 0 ? \"max-sm:animate-[ui-slide-from-right_360ms_cubic-bezier(0.16,1,0.3,1)_both]\" : \"max-sm:animate-[ui-slide-from-left_360ms_cubic-bezier(0.16,1,0.3,1)_both]\"} motion-reduce:animate-none` : \"max-sm:hidden\");\n\n const priceOf = (plan: ComparisonPlan) => (plan.price === null ? null : typeof plan.price === \"number\" ? plan.price : billing === \"yearly\" ? plan.price.yearly : plan.price.monthly);\n\n return (\n
\n
\n {yearlyBadge && (\n {\n setBillingDir(v === \"yearly\" ? 1 : -1);\n setBilling(v);\n }}\n options={[\n { value: \"monthly\", label: \"Monthly\" },\n { value: \"yearly\", label: \"Yearly\", badge: yearlyBadge },\n ]}\n />\n )}\n {/* Phones: one plan at a time. */}\n
\n \n {plans.map((p, i) => (\n {\n switchRefs.current[i] = el;\n }}\n type=\"button\"\n role=\"tab\"\n aria-selected={i === selected}\n onClick={() => pick(i)}\n className={`relative h-8 rounded-full px-3.5 text-[12.5px] font-medium transition-colors duration-300 ${FOCUS} ${i === selected ? \"text-foreground\" : \"text-muted-foreground\"}`}\n >\n {p.name}\n \n ))}\n
\n
\n\n
setHover(null)}>\n {/* The column that runs the height of the table and glides between plans: this part under the header… */}\n
\n\n {groups.map((group, g) => {\n const isOpen = open[g];\n const groupId = `${id}-g${g}`;\n return (\n
\n
\n
\n setOpen((o) => o.map((v, i) => (i === g ? !v : v)))}\n className={`flex w-full items-center gap-2 rounded-md py-3.5 text-left text-[12.5px] font-medium text-foreground ${FOCUS}`}\n >\n \n \n \n {group.title}\n \n
\n
\n \n
\n {group.rows.map((row) => (\n \n
\n {row.label}\n {row.hint && {row.hint}}\n
\n {plans.map((plan, i) => (\n
\n \n
\n ))}\n
\n ))}\n
\n
\n \n );\n })}\n {/* Closes the column at the bottom. */}\n
\n
\n \n );\n}\n"}],"css":{"@keyframes ui-slide-from-right":{"from":{"opacity":"0","transform":"translateX(8px)"},"to":{"opacity":"1","transform":"none"}},"@keyframes ui-slide-from-left":{"from":{"opacity":"0","transform":"translateX(-8px)"},"to":{"opacity":"1","transform":"none"}}},"docs":"Docs and live preview: https://hairlineui.com/ui/comparison-table"}