{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "gooey-tabs", "title": "Gooey tabs", "description": "A floating segmented pill of equal-width tabs whose solid marker slides to the picked tab while a liquid silhouette chases it on a spring, stretching and trailing a droplet tail.", "dependencies": [ "liquid-gooey", "motion" ], "registryDependencies": [], "files": [ { "path": "registry/items/gooey-tabs/gooey-tabs.tsx", "content": "\"use client\";\n\nimport { Liquid } from \"liquid-gooey\";\nimport { useReducedMotionConfig } from \"motion/react\";\nimport { useEffect, useRef, useState, useSyncExternalStore, type CSSProperties, type ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A segmented pill with one liquid indicator (`liquid-gooey`, `effect=\"move\"`):\n * the marker trails the tab you picked with a droplet tail instead of cutting\n * to it. The indicator is a single element that translates, not a highlight on\n * each tab — that is what gives `move` something to chase. Every tab is the\n * same width so the offset is `index * tabWidth` and nothing is measured.\n *\n * Ported from 180Connect's client-record tabs with the routing lifted out.\n */\n\nexport type GooeyTabItem = {\n id: string;\n label: ReactNode;\n /** With an href the tab renders as a link; without one, as a button. */\n href?: string;\n /** Shown beside the label when above zero. */\n count?: number | null;\n};\n\nexport type GooeyTabLinkProps = {\n item: GooeyTabItem;\n href: string;\n className: string;\n style: CSSProperties;\n \"aria-current\"?: \"page\";\n onClick: () => void;\n children: ReactNode;\n};\n\nconst PHONE_QUERY = \"(width < 40rem)\";\n\nfunction subscribePhone(onChange: () => void) {\n const query = window.matchMedia(PHONE_QUERY);\n query.addEventListener(\"change\", onChange);\n return () => query.removeEventListener(\"change\", onChange);\n}\n\nfunction useIsPhone() {\n return useSyncExternalStore(\n subscribePhone,\n () => window.matchMedia(PHONE_QUERY).matches,\n () => false,\n );\n}\n\nexport function GooeyTabs({\n items,\n value,\n defaultValue,\n onValueChange,\n renderLink,\n tabWidth = 112,\n ariaLabel = \"Sections\",\n gooBlur = 5,\n gooContrast = 18,\n className,\n}: {\n items: GooeyTabItem[];\n /** The open tab. null, or an id not in `items`, hides the marker. */\n value?: string | null;\n defaultValue?: string | null;\n onValueChange?: (id: string) => void;\n /** Renders a tab that has an href, e.g. with next/link. Defaults to . */\n renderLink?: (props: GooeyTabLinkProps) => ReactNode;\n /** Every tab's width in px; size it for the longest label plus its count. */\n tabWidth?: number;\n ariaLabel?: string;\n gooBlur?: number;\n gooContrast?: number;\n className?: string;\n}) {\n const [uncontrolled, setUncontrolled] = useState(defaultValue ?? items[0]?.id ?? null);\n const current = value !== undefined ? value : uncontrolled;\n const activeIndex = items.findIndex((item) => item.id === current);\n const stripRef = useRef(null);\n const reduce = useReducedMotionConfig();\n\n // On a phone (and under reduced motion) the active tab wears its own solid\n // pill and the liquid indicator is not mounted at all — not hidden with CSS.\n // liquid-gooey paints each item's silhouette into its own SVG layer, which a\n // `display: none` never reaches; a hidden item also stops getting the\n // transition events that wake it, and its silhouette freezes mid-stretch.\n const isPhone = useIsPhone();\n\n // The same goes for a strip too narrow for its tabs: once it scrolls, the\n // liquid layer (painted in its own SVG) no longer lines up with the tabs and\n // leaves a stray silhouette beside them. So a strip that overflows wears the\n // solid pill as well.\n const [overflowing, setOverflowing] = useState(false);\n useEffect(() => {\n const strip = stripRef.current;\n if (!strip) return;\n const check = () => setOverflowing(strip.scrollWidth > strip.clientWidth + 1);\n check();\n const observer = new ResizeObserver(check);\n observer.observe(strip);\n return () => observer.disconnect();\n }, [items.length, tabWidth]);\n\n const liquid = !isPhone && !reduce && !overflowing;\n\n // Keep the selected tab fully visible on narrow screens.\n useEffect(() => {\n const strip = stripRef.current;\n if (!strip || activeIndex < 0) return;\n strip.scrollLeft = Math.max(0, activeIndex * tabWidth - (strip.clientWidth - tabWidth) / 2);\n }, [activeIndex, tabWidth]);\n\n function select(id: string) {\n if (value === undefined) setUncontrolled(id);\n onValueChange?.(id);\n }\n\n return (\n \n );\n}\n", "type": "registry:component" } ], "meta": { "kind": "widget", "whenToUse": "Use as the primary section switcher at the top of a record or detail page with three to six sections, where each tab can be a route (pass href) or local state. Not for long or variable-length labels (every tab is one width) or for a queue switcher that needs counts as the main signal; use count-tabs for that.", "origin": { "project": "180Connect", "path": "src/app/(app)/clients/[id]/record-tabs.tsx" }, "credits": [ { "name": "liquid-gooey by Jakub Antalik (the Liquid move effect, used as a dependency)", "url": "https://github.com/Jakubantalik/Libraries.dev", "license": "MIT" } ] }, "type": "registry:component" }