1b:I[55681,["/_next/static/immutable/chunks/1q7k1nvjizi_i.js","/_next/static/immutable/chunks/19landlw60_cl.js","/_next/static/immutable/chunks/1d2_ynpuj2eev.js","/_next/static/immutable/chunks/23k1rfrg9ssqm.js","/_next/static/immutable/chunks/2-5dryfi9zs6k.js","/_next/static/immutable/chunks/3sar0pp0k94or.js"],"default"] 1c:T589e,"use client"; import { createElement, useCallback, useEffect, useId, useLayoutEffect, useRef, useState, type ComponentType, type KeyboardEvent as ReactKeyboardEvent, type SVGProps, } from "react"; import { AnimatePresence, LayoutGroup, motion, type Transition, type Variants } from "motion/react"; import "./liquid-tabs.css"; /** * Liquid Tabs — a notifications card whose active tab is liquid. * * The card's body and the active tab are drawn as two shapes merged by a goo * filter, so the tab reads as part of the card — a folder tab — and when you * switch, it slides under the next label and flows into the body on the way. * The rows leave toward the side you came from and arrive from the side you * went to, through a blur; the selected row's avatar inverts with a bounce. * The chevron opens the overflow: picking one replaces the third tab, its * label rolling over as the tab slides to it. Arrow keys move between tabs. */ export type LiquidTabsItem = { id: string; title: string; subtitle: string; time: string }; export type LiquidTabsProps = { /** The card's corner radius, 0–40px. */ corner?: number; /** How many rows each tab shows. */ rows?: 2 | 3 | 4; theme?: "light" | "dark"; /** Fired when a row is selected, with the tab it is on. */ onSelect?: (item: LiquidTabsItem, tab: string) => void; }; type IconType = ComponentType & { size?: number | string; strokeWidth?: number | string }>; type Item = LiquidTabsItem & { icon: IconType }; type TabKey = "all" | "mentions" | "system" | "archived" | "requests"; /* ── icons: Lucide's, inlined, so the component needs nothing but Motion ── */ type IconNode = [string, Record][]; function lucide(node: IconNode): IconType { function Icon({ size = 24, strokeWidth = 2, ...props }: SVGProps & { size?: number | string; strokeWidth?: number | string }) { return ( ); } return Icon; } const AtSign = lucide([["circle", {"cx": "12", "cy": "12", "r": "4"}], ["path", {"d": "M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"}]]); const Check = lucide([["path", {"d": "M20 6 9 17l-5-5"}]]); const ChevronDown = lucide([["path", {"d": "m6 9 6 6 6-6"}]]); const Clock = lucide([["circle", {"cx": "12", "cy": "12", "r": "10"}], ["path", {"d": "M12 6v6l4 2"}]]); const HardDrive = lucide([["path", {"d": "M10 16h.01"}], ["path", {"d": "M2.212 11.577a2 2 0 0 0-.212.896V18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-5.527a2 2 0 0 0-.212-.896L18.55 5.11A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"}], ["path", {"d": "M21.946 12.013H2.054"}], ["path", {"d": "M6 16h.01"}]]); const Inbox = lucide([["polyline", {"points": "22 12 16 12 14 15 10 15 8 12 2 12"}], ["path", {"d": "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"}]]); const Link2 = lucide([["path", {"d": "M9 17H7A5 5 0 0 1 7 7h2"}], ["path", {"d": "M15 7h2a5 5 0 1 1 0 10h-2"}], ["line", {"x1": "8", "x2": "16", "y1": "12", "y2": "12"}]]); const Mail = lucide([["path", {"d": "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"}], ["rect", {"x": "2", "y": "4", "width": "20", "height": "16", "rx": "2"}]]); const MessageCircle = lucide([["path", {"d": "M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"}]]); const Package = lucide([["path", {"d": "M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"}], ["path", {"d": "M12 22V12"}], ["polyline", {"points": "3.29 7 12 12 20.71 7"}], ["path", {"d": "m7.5 4.27 9 5.15"}]]); const Quote = lucide([["path", {"d": "M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"}], ["path", {"d": "M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"}]]); const RefreshCw = lucide([["path", {"d": "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"}], ["path", {"d": "M21 3v5h-5"}], ["path", {"d": "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"}], ["path", {"d": "M8 16H3v5"}]]); const Reply = lucide([["path", {"d": "M20 18v-2a4 4 0 0 0-4-4H4"}], ["path", {"d": "m9 17-5-5 5-5"}]]); const Settings = lucide([["path", {"d": "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"}], ["circle", {"cx": "12", "cy": "12", "r": "3"}]]); const ShieldCheck = lucide([["path", {"d": "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}], ["path", {"d": "m9 12 2 2 4-4"}]]); const UserPlus = lucide([["path", {"d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}], ["circle", {"cx": "9", "cy": "7", "r": "4"}], ["line", {"x1": "19", "x2": "19", "y1": "8", "y2": "14"}], ["line", {"x1": "22", "x2": "16", "y1": "11", "y2": "11"}]]); const Users = lucide([["path", {"d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}], ["path", {"d": "M16 3.128a4 4 0 0 1 0 7.744"}], ["path", {"d": "M22 21v-2a4 4 0 0 0-3-3.87"}], ["circle", {"cx": "9", "cy": "7", "r": "4"}]]); const Archive = lucide([["rect", {"width": "20", "height": "5", "x": "2", "y": "3", "rx": "1"}], ["path", {"d": "M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"}], ["path", {"d": "M10 12h4"}]]); /* the domed "badge" glyph on the first row */ function DomeIcon({ size = 18, ...props }: SVGProps & { size?: number | string }) { return ( ); } /* a solid shield with an inset outline (the second row) */ function ShieldOutlineIcon({ size = 18, ...props }: SVGProps & { size?: number | string }) { return ( ); } /* a rounded shield with a small notch (the third row) */ function ShieldNotchIcon({ size = 18, ...props }: SVGProps & { size?: number | string }) { return ( ); } /* ── data ── */ const TAB_LABELS: Record = { all: "All", mentions: "Mentions", system: "System", archived: "Archived", requests: "Requests", }; const OVERFLOW_TABS: TabKey[] = ["system", "archived", "requests"]; const DATA: Record = { all: [ { id: "a1", title: "All", subtitle: "Notification", time: "12:10", icon: DomeIcon }, { id: "a2", title: "Mentions", subtitle: "Notification", time: "13:00", icon: ShieldOutlineIcon }, { id: "a3", title: "Badge", subtitle: "Notification", time: "13:10", icon: ShieldNotchIcon }, { id: "a4", title: "Security", subtitle: "Notification", time: "14:25", icon: ShieldCheck }, ], mentions: [ { id: "m1", title: "Ava Chen", subtitle: "Mentioned you", time: "09:42", icon: AtSign }, { id: "m2", title: "Leo Park", subtitle: "Replied to you", time: "10:15", icon: Reply }, { id: "m3", title: "Mia Ross", subtitle: "Commented", time: "11:30", icon: MessageCircle }, { id: "m4", title: "Noah Kim", subtitle: "Quoted you", time: "12:05", icon: Quote }, ], system: [ { id: "s1", title: "Update", subtitle: "Version 2.4 ready", time: "08:00", icon: RefreshCw }, { id: "s2", title: "Security", subtitle: "New sign-in", time: "08:45", icon: ShieldCheck }, { id: "s3", title: "Storage", subtitle: "80% used", time: "10:20", icon: HardDrive }, { id: "s4", title: "Settings", subtitle: "Preferences saved", time: "11:55", icon: Settings }, ], archived: [ { id: "r1", title: "Inbox", subtitle: "Cleared", time: "Mon", icon: Inbox }, { id: "r2", title: "Delivery", subtitle: "Package arrived", time: "Sun", icon: Package }, { id: "r3", title: "Reminder", subtitle: "Snoozed", time: "Sat", icon: Clock }, { id: "r4", title: "Archive", subtitle: "12 items", time: "Fri", icon: Archive }, ], requests: [ { id: "q1", title: "Sam Lee", subtitle: "Wants to connect", time: "07:30", icon: UserPlus }, { id: "q2", title: "Design Team", subtitle: "Invite to join", time: "09:10", icon: Users }, { id: "q3", title: "Shared link", subtitle: "Access requested", time: "10:40", icon: Link2 }, { id: "q4", title: "Newsletter", subtitle: "Confirm email", time: "13:20", icon: Mail }, ], }; /* ── motion ── */ const TAB_H = 52; // the tab strip const ROW_H = 72; // one row /* springs with no wobble — just a smooth settle */ const blobSpring: Transition = { type: "spring", visualDuration: 0.55, bounce: 0.12 }; const smooth: Transition = { type: "spring", visualDuration: 0.4, bounce: 0 }; const glide: Transition = { type: "spring", visualDuration: 0.3, bounce: 0 }; const listVariants: Variants = { initial: {}, animate: { transition: { staggerChildren: 0.04, delayChildren: 0.05 } }, exit: { transition: { staggerChildren: 0.02 } }, }; const rowVariants: Variants = { initial: (dir: number) => ({ opacity: 0, x: dir * 18, filter: "blur(4px)" }), animate: { opacity: 1, x: 0, filter: "blur(0px)", transition: { type: "spring", visualDuration: 0.45, bounce: 0 }, }, exit: (dir: number) => ({ opacity: 0, x: dir * -18, filter: "blur(4px)", transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] }, }), }; /* ── component ── */ export default function LiquidTabs({ corner = 20, rows = 4, theme = "light", onSelect }: LiquidTabsProps) { const radius = Math.min(40, Math.max(0, corner)); const rowCount = rows; const uid = useId().replace(/[^a-zA-Z0-9_-]/g, ""); const gooId = `pltabs-goo-${uid}`; const [third, setThird] = useState("system"); const visibleTabs: TabKey[] = ["all", "mentions", third]; const [active, setActive] = useState("all"); const [dir, setDir] = useState(1); const [hovered, setHovered] = useState(null); const [selected, setSelected] = useState>({ all: "a2", mentions: "m1", system: "s2", archived: "r1", requests: "q1", }); const [menuOpen, setMenuOpen] = useState(false); /* the active tab is measured, so the liquid tab can slide under it */ const rootRef = useRef(null); const tabRefs = useRef>>({}); const [blob, setBlob] = useState<{ x: number; w: number } | null>(null); const measure = useCallback(() => { const root = rootRef.current; const el = tabRefs.current[active]; if (!root || !el) return; const r = root.getBoundingClientRect(); const t = el.getBoundingClientRect(); setBlob({ x: t.left - r.left, w: t.width }); }, [active]); useLayoutEffect(measure, [measure, third]); useEffect(() => { const ro = new ResizeObserver(measure); if (rootRef.current) ro.observe(rootRef.current); Object.values(tabRefs.current).forEach((el) => el && ro.observe(el)); document.fonts?.ready.then(measure).catch(() => {}); return () => ro.disconnect(); }, [measure, third]); const selectTab = (key: TabKey) => { if (key === active) return; const order: TabKey[] = ["all", "mentions", ...OVERFLOW_TABS]; setDir(order.indexOf(key) > order.indexOf(active) ? 1 : -1); setHovered(null); setActive(key); }; const onTabKeyDown = (e: ReactKeyboardEvent, index: number) => { if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return; e.preventDefault(); const next = (index + (e.key === "ArrowRight" ? 1 : -1) + visibleTabs.length) % visibleTabs.length; selectTab(visibleTabs[next]); tabRefs.current[visibleTabs[next]]?.focus(); }; const pickOverflow = (key: TabKey) => { setMenuOpen(false); setThird(key); selectTab(key); }; /* the menu closes on a press outside it, or Escape */ const menuRef = useRef(null); useEffect(() => { if (!menuOpen) return; const onDown = (e: PointerEvent) => { if (!menuRef.current?.contains(e.target as Node)) setMenuOpen(false); }; const onKey = (e: KeyboardEvent) => e.key === "Escape" && setMenuOpen(false); window.addEventListener("pointerdown", onDown); window.addEventListener("keydown", onKey); return () => { window.removeEventListener("pointerdown", onDown); window.removeEventListener("keydown", onKey); }; }, [menuOpen]); const items = DATA[active].slice(0, rowCount); return (

{/* the goo: blur, then pull the alpha back to a hard edge */} {/* the grey strip behind the inactive tabs */}

{/* the card: its body and the liquid tab, merged by the goo */}

{blob && ( )}

{/* ── tabs ── */}

{visibleTabs.map((key, i) => { const isActive = key === active; return ( ); })}

{/* the overflow: a chevron and its menu */}

{menuOpen && ( )}

{/* ── rows ── */}

setHovered(null)} >

); } 1d:T1d26,/* =========================================================================== Liquid Tabs. The card's body and its active tab are two shapes under one goo filter, so the tab is part of the card; the grey strip behind the other tabs sits outside the filter, under both. Everything is themed through the tokens below, which cross-fade when the theme flips. =========================================================================== */ .pltabs { --pltabs-card: #ffffff; --pltabs-strip: #dfdfe2; --pltabs-text: #0a0a0a; --pltabs-tab-idle: #52525b; --pltabs-muted: #71717a; --pltabs-faint: #a1a1aa; --pltabs-divider: #ececee; --pltabs-hover: rgb(0 0 0 / 0.045); --pltabs-ring: rgb(10 10 10 / 0.3); --pltabs-avatar: #efeff1; --pltabs-avatar-fg: #0a0a0a; --pltabs-avatar-on: #1c1c1e; --pltabs-avatar-on-fg: #ffffff; --pltabs-card-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.04)) drop-shadow(0 8px 22px rgb(0 0 0 / 0.08)); --pltabs-menu-shadow: 0 10px 30px rgb(0 0 0 / 0.12); position: relative; width: 100%; max-width: 380px; color: var(--pltabs-text); font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .pltabs[data-theme="dark"] { --pltabs-card: #1d1d20; --pltabs-strip: #141416; --pltabs-text: #f4f4f5; --pltabs-tab-idle: #a1a1aa; --pltabs-muted: #8e8e96; --pltabs-faint: #63636b; --pltabs-divider: #2a2a2e; --pltabs-hover: rgb(255 255 255 / 0.05); --pltabs-ring: rgb(255 255 255 / 0.35); --pltabs-avatar: #2a2a2f; --pltabs-avatar-fg: #f4f4f5; --pltabs-avatar-on: #f4f4f5; --pltabs-avatar-on-fg: #111113; --pltabs-card-shadow: drop-shadow(0 1px 0 rgb(255 255 255 / 0.04)) drop-shadow(0 12px 28px rgb(0 0 0 / 0.55)); --pltabs-menu-shadow: 0 12px 32px rgb(0 0 0 / 0.5); } .pltabs__defs { position: absolute; width: 0; height: 0; pointer-events: none; } /* surfaces cross-fade when the theme flips */ .pltabs__strip, .pltabs__body, .pltabs__blob, .pltabs__divider { transition: background-color 0.4s ease; } .pltabs__strip { position: absolute; top: 6px; right: 0; left: 0; background: var(--pltabs-strip); } .pltabs__surface { position: absolute; inset: 0; pointer-events: none; filter: var(--pltabs-card-shadow); } .pltabs__gooLayer { position: absolute; inset: 0; } .pltabs__body { position: absolute; right: 0; bottom: 0; left: 0; background: var(--pltabs-card); } .pltabs__blob { position: absolute; top: 0; left: 0; background: var(--pltabs-card); } /* ── tabs ── */ .pltabs__bar { position: relative; display: flex; align-items: stretch; } .pltabs__tabs { display: flex; align-items: stretch; } .pltabs__tab { position: relative; display: flex; align-items: center; justify-content: center; min-width: 84px; padding: 0 20px; border: 0; background: none; color: var(--pltabs-tab-idle); font: inherit; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; cursor: pointer; outline: none; transition: color 0.3s ease, font-weight 0.3s ease; } .pltabs__tab[data-active="true"] { color: var(--pltabs-text); font-weight: 600; } @media (hover: hover) { .pltabs__tab:hover { color: var(--pltabs-text); } } .pltabs__tabLabel { position: relative; display: block; overflow: hidden; padding: 0 2px; white-space: nowrap; } .pltabs__tab:focus-visible .pltabs__tabLabel { border-radius: 6px; box-shadow: 0 0 0 2px var(--pltabs-ring); } .pltabs__tabText { display: block; } .pltabs__underline { position: absolute; bottom: 6px; left: 50%; width: 60px; height: 3px; border-radius: 999px; background: var(--pltabs-text); translate: -50% 0; } .pltabs__more { position: relative; display: flex; align-items: center; margin-left: auto; padding: 6px 10px 0 0; } .pltabs__chevron { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--pltabs-text); cursor: pointer; outline: none; transition: background-color 0.2s ease, transform 0.15s ease; } @media (hover: hover) { .pltabs__chevron:hover { background: var(--pltabs-hover); } } .pltabs__chevron:active { transform: scale(0.95); } .pltabs__chevron:focus-visible { box-shadow: 0 0 0 2px var(--pltabs-ring); } .pltabs__chevronIcon { display: grid; } .pltabs__menu { position: absolute; top: 46px; right: 8px; z-index: 30; width: 160px; padding: 4px; border: 1px solid var(--pltabs-divider); background: var(--pltabs-card); box-shadow: var(--pltabs-menu-shadow); } .pltabs__menuItem { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--pltabs-text); font: inherit; font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; outline: none; transition: background-color 0.2s ease; } .pltabs__menuItem:hover, .pltabs__menuItem:focus-visible { background: var(--pltabs-hover); } .pltabs__check { display: grid; } /* ── rows ── */ .pltabs__panel { position: relative; overflow: hidden; } .pltabs__list { position: relative; width: 100%; margin: 0; padding: 0 6px; list-style: none; } .pltabs__item { position: relative; } .pltabs__divider { position: absolute; top: 0; right: 16px; left: 16px; height: 1px; background: var(--pltabs-divider); transition: opacity 0.2s ease, background-color 0.4s ease; } .pltabs__row { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 0 16px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; outline: none; } .pltabs__hover { position: absolute; inset: 6px 0; background: var(--pltabs-hover); } .pltabs__avatar { --pltabs-icon-inset: var(--pltabs-avatar); position: relative; display: grid; flex-shrink: 0; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--pltabs-avatar); color: var(--pltabs-avatar-fg); transition: background-color 0.35s ease, color 0.35s ease; } .pltabs__avatar[data-selected="true"] { --pltabs-icon-inset: var(--pltabs-avatar-on); background: var(--pltabs-avatar-on); color: var(--pltabs-avatar-on-fg); } .pltabs__text { position: relative; flex: 1; min-width: 0; } .pltabs__title, .pltabs__subtitle { display: block; overflow: hidden; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; transition: color 0.3s ease; } .pltabs__title { color: var(--pltabs-text); font-size: 14.5px; font-weight: 600; letter-spacing: -0.015em; } .pltabs__subtitle { margin-top: 2px; color: var(--pltabs-muted); font-size: 12.5px; } .pltabs__time { position: relative; align-self: flex-start; padding-top: 19px; color: var(--pltabs-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; transition: color 0.3s ease; } @media (prefers-reduced-motion: reduce) { .pltabs__strip, .pltabs__body, .pltabs__blob, .pltabs__divider, .pltabs__tab, .pltabs__avatar { transition: none; } } 13:[[["$","script","0",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"Liquid Tabs — Pin UI\",\"description\":\"A notifications card whose active tab is liquid, flowing from tab to tab. The card and its active tab are one liquid shape: switch tabs and the tab slides under the next label, flowing into the card on the way. Rows leave toward where you came from and arrive from where you went, through a blur; the\",\"url\":\"https://www.pinui.xyz/components/liquid-tabs\",\"codeRepository\":\"https://github.com/Rachit315/Pin-UI\",\"programmingLanguage\":\"TypeScript\",\"runtimePlatform\":\"React\",\"author\":{\"@id\":\"https://www.pinui.xyz/#organization\"},\"isPartOf\":{\"@id\":\"https://www.pinui.xyz/#software\"},\"license\":\"https://opensource.org/licenses/MIT\"}"}}],["$","script","1",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://www.pinui.xyz\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Components\",\"item\":\"https://www.pinui.xyz/components\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Liquid Tabs\",\"item\":\"https://www.pinui.xyz/components/liquid-tabs\"}]}"}}]],["$","$L1b",null,{"entry":{"slug":"liquid-tabs","category":"lists","name":"Liquid Tabs","isNew":true,"tagline":"A notifications card whose active tab is liquid, flowing from tab to tab.","blurb":"The card and its active tab are one liquid shape: switch tabs and the tab slides under the next label, flowing into the card on the way. Rows leave toward where you came from and arrive from where you went, through a blur; the selected row's avatar inverts with a bounce, and the chevron swaps the third tab from an overflow menu.","highlights":["Liquid folder tab","Direction-aware rows","Overflow tab menu","Light and dark"],"clip":"/clips/loop/liquid-tabs.mp4?v=2","poster":"/clips/loop/liquid-tabs.jpg?v=2","hero":false,"sound":false,"zoom":1,"stage":"#e9e9eb","clipStage":"#e8e8e8","stageDark":"#0c0c0e","usage":"import LiquidTabs from \"@/components/library/LiquidTabs\";\n\n console.log(tab, item)} />","props":[{"name":"corner","type":"number","fallback":"20","note":"The card's corner radius, clamped to 0–40px. The tab and the menu follow it."},{"name":"rows","type":"2 | 3 | 4","fallback":"4","note":"How many rows each tab shows; the card is exactly that tall."},{"name":"theme","type":"\"light\" | \"dark\"","fallback":"\"light\"","note":"A white card on a grey strip, or graphite on near-black."},{"name":"onSelect","type":"(item, tab) => void","note":"Fired when a row is selected, with the tab it is on."}],"files":[{"name":"LiquidTabs.tsx","lang":"tsx"},{"name":"liquid-tabs.css","lang":"css"}],"info":{"paragraphs":["The card's body and the active tab are drawn as two shapes under one goo filter, so the tab reads as part of the card — a folder tab — and when you switch, it slides under the next label on a spring and the two run together on the way. The grey strip behind the other tabs sits outside the filter, so they stay flat.","The rows know which way you went: they leave toward the tab you came from and arrive from the one you went to, through a blur, on a short stagger. Hovering slides one highlight between rows, the selected row's avatar inverts with a small bounce, and the chevron opens an overflow menu whose pick replaces the third tab — its label rolling over as the tab slides to it. Arrow keys move between tabs."]},"origin":{"label":"tab"}},"panes":[{"name":"LiquidTabs.tsx","lang":"tsx","code":"$1c"},{"name":"liquid-tabs.css","lang":"css","code":"$1d"}],"registryUrl":"https://www.pinui.xyz/r/liquid-tabs.json"}]]

Liquid Tabs — Pin UI Component