50: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"] 51: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"] 52: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"] 53:T2187,"use client"; // Adapted from Lina by SameerJS6 (https://lina.sameer.sh) — lina-radix // scroll-area. Changes from the original: Lina's gradient-only ScrollMask is // dropped, the scrollbar is restyled to the shape system, // and tw-animate-css visibility classes are swapped for a plain opacity // transition. Falls back to native overflow scrolling on touch-primary devices. import { createContext, forwardRef, useContext, useEffect, useRef, useState, type ComponentPropsWithoutRef, type ComponentRef, } from "react"; import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"; import { cn } from "@/lib/utils"; import { useShape } from "@/lib/shape-context"; import { useTouchPrimary } from "@/hooks/use-touch-primary"; // On touch-primary devices the Radix machinery is skipped entirely in favour // of native overflow scrolling (better physics, momentum, rubber-banding); // the context lets the exported ScrollBar no-op in that branch. const ScrollAreaContext = createContext(false); // Whether the scrollbar should currently be shown (hovering the area or // actively scrolling). Owned by ScrollArea rather than Radix's type="hover" // machinery: Radix only reveals on hover (never on scroll) and stacks // conditional Presence layers that fight // the CSS fade. Default true so a standalone ScrollBar stays visible. const ScrollbarVisibleContext = createContext(true); // How long the scrollbar lingers after the last scroll event before fading. // Hover hide is // immediate — the fade classes add their own 160ms grace. const SCROLL_LINGER_MS = 600; type Orientation = "vertical" | "horizontal" | "both"; interface ScrollAreaProps extends ComponentPropsWithoutRef { viewportClassName?: string; /** Which axes get scrollbars. Defaults to `"vertical"`. */ orientation?: Orientation; } const ScrollArea = forwardRef< ComponentRef, ScrollAreaProps >( ( { className, children, // Swallowed: hide timing is owned by the fade classes + scroll linger // below, not Radix's hover machinery (see type="always" note). scrollHideDelay: _scrollHideDelay, viewportClassName, orientation = "vertical", ...props }, ref ) => { const isTouch = useTouchPrimary(); // Hover + scroll visibility, driving the scrollbar fade below. Scroll // reveals linger SCROLL_LINGER_MS after the last scroll event. const [hovering, setHovering] = useState(false); const [scrolling, setScrolling] = useState(false); const scrollTimerRef = useRef | null>(null); useEffect( () => () => { if (scrollTimerRef.current) clearTimeout(scrollTimerRef.current); }, [] ); const handleScroll = () => { setScrolling(true); if (scrollTimerRef.current) clearTimeout(scrollTimerRef.current); scrollTimerRef.current = setTimeout(() => setScrolling(false), SCROLL_LINGER_MS); }; return ( {isTouch ? (

{children}

) : ( setHovering(true)} onPointerLeave={() => setHovering(false)} className={cn("relative overflow-hidden", className)} {...props} > {children} {orientation !== "horizontal" && } {orientation !== "vertical" && } {orientation === "both" && } )} ); } ); ScrollArea.displayName = "ScrollArea"; const ScrollBar = forwardRef< ComponentRef, ComponentPropsWithoutRef >(({ className, orientation = "vertical", ...props }, ref) => { const isTouch = useContext(ScrollAreaContext); const visible = useContext(ScrollbarVisibleContext); const shape = useShape(); if (isTouch) return null; return ( ); }); ScrollBar.displayName = "ScrollBar"; export { ScrollArea, ScrollBar }; export type { ScrollAreaProps }; 4c:["$","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","@radix-ui/react-scroll-area",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-scroll-area","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":"@radix-ui/react-scroll-area"}]]}]}]]}],["$","$L50",null,{"registryDependencies":["utils","https://www.fluidfunctionalism.com/r/shape-context.json","https://www.fluidfunctionalism.com/r/use-touch-primary.json"]}]]}],["$","$L51",null,{"sourceUrl":"https://www.fluidfunctionalism.com/r/scroll-area.json","proxyUrl":"https://shadcnregistry.com/r/fluid/scroll-area","itemId":"@fluid/scroll-area"}],["$","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"}],["$","$L52",null,{"files":[{"path":"registry/radix/scroll-area.tsx","content":"$53","type":"registry:ui","target":"components/ui/scroll-area.tsx"}]}]]}],"$L54"]}]

Scroll Area

Installation

Files

components

Styles