2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:Td24,"use client"; import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"; import { useCallback, useEffect, useRef, useState, type ComponentProps, type CSSProperties } from "react"; import { cn } from "@/lib/utils"; export interface ScrollAreaProps extends ComponentProps { orientation?: "vertical" | "horizontal" | "both"; /** Fade the content out at any edge that has more to scroll to. */ fade?: boolean; viewportClassName?: string; } const FADE = 28; export function ScrollArea({ orientation = "vertical", fade = false, type = "hover", className, viewportClassName, children, ...props }: ScrollAreaProps) { const viewport = useRef(null); const [edges, setEdges] = useState({ top: false, bottom: false, left: false, right: false }); const measure = useCallback(() => { const el = viewport.current; if (!el || !fade) return; setEdges({ top: el.scrollTop > 1, bottom: el.scrollTop + el.clientHeight < el.scrollHeight - 1, left: el.scrollLeft > 1, right: el.scrollLeft + el.clientWidth < el.scrollWidth - 1, }); }, [fade]); useEffect(() => { measure(); const el = viewport.current; if (!el || !fade) return; const observer = new ResizeObserver(measure); observer.observe(el); return () => observer.disconnect(); }, [measure, fade]); const vertical = orientation !== "horizontal"; const horizontal = orientation !== "vertical"; const mask = fade ? [ vertical && `linear-gradient(to bottom, transparent, black ${edges.top ? FADE : 0}px, black calc(100% - ${edges.bottom ? FADE : 0}px), transparent)`, horizontal && `linear-gradient(to right, transparent, black ${edges.left ? FADE : 0}px, black calc(100% - ${edges.right ? FADE : 0}px), transparent)`, ].filter(Boolean) : []; const style: CSSProperties | undefined = mask.length ? { maskImage: mask.join(", "), WebkitMaskImage: mask.join(", "), maskComposite: "intersect", WebkitMaskComposite: "source-in" } : undefined; return ( {children} {vertical && } {horizontal && } ); } export function ScrollBar({ orientation = "vertical", className, ...props }: ComponentProps) { return ( ); } export default ScrollArea; 2e:T81ed,

"use client";

import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
import { useCallback, useEffect, useRef, useState, type ComponentProps, type CSSProperties } from "react";
import { cn } from "@/lib/utils";

export interface ScrollAreaProps extends ComponentProps<typeof ScrollAreaPrimitive.Root> {
  orientation?: "vertical" | "horizontal" | "both";
  /** Fade the content out at any edge that has more to scroll to. */
  fade?: boolean;
  viewportClassName?: string;
}

const FADE = 28;

export function ScrollArea({ orientation = "vertical", fade = false, type = "hover", className, viewportClassName, children, ...props }: ScrollAreaProps) {
  const viewport = useRef<HTMLDivElement>(null);
  const [edges, setEdges] = useState({ top: false, bottom: false, left: false, right: false });

  const measure = useCallback(() => {
    const el = viewport.current;
    if (!el || !fade) return;
    setEdges({
      top: el.scrollTop > 1,
      bottom: el.scrollTop + el.clientHeight < el.scrollHeight - 1,
      left: el.scrollLeft > 1,
      right: el.scrollLeft + el.clientWidth < el.scrollWidth - 1,
    });
  }, [fade]);

  useEffect(() => {
    measure();
    const el = viewport.current;
    if (!el || !fade) return;
    const observer = new ResizeObserver(measure);
    observer.observe(el);
    return () => observer.disconnect();
  }, [measure, fade]);

  const vertical = orientation !== "horizontal";
  const horizontal = orientation !== "vertical";
  const mask = fade
    ? [
        vertical && `linear-gradient(to bottom, transparent, black ${edges.top ? FADE : 0}px, black calc(100% - ${edges.bottom ? FADE : 0}px), transparent)`,
        horizontal && `linear-gradient(to right, transparent, black ${edges.left ? FADE : 0}px, black calc(100% - ${edges.right ? FADE : 0}px), transparent)`,
      ].filter(Boolean)
    : [];
  const style: CSSProperties | undefined = mask.length
    ? { maskImage: mask.join(", "), WebkitMaskImage: mask.join(", "), maskComposite: "intersect", WebkitMaskComposite: "source-in" }
    : undefined;

  return (
    <ScrollAreaPrimitive.Root type={type} className={cn("relative overflow-hidden", className)} {...props}>
      <ScrollAreaPrimitive.Viewport ref={viewport} onScroll={measure} style={style} className={cn("size-full rounded-[inherit] outline-none", viewportClassName)}>
        {children}
      </ScrollAreaPrimitive.Viewport>
      {vertical && <ScrollBar orientation="vertical" />}
      {horizontal && <ScrollBar orientation="horizontal" />}
      <ScrollAreaPrimitive.Corner />
    </ScrollAreaPrimitive.Root>
  );
}

export function ScrollBar({ orientation = "vertical", className, ...props }: ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>) {
  return (
    <ScrollAreaPrimitive.Scrollbar
      forceMount
      orientation={orientation}
      className={cn(
        "z-10 flex touch-none select-none p-0.5 transition-opacity duration-300 data-[state=hidden]:pointer-events-none data-[state=hidden]:opacity-0",
        orientation === "vertical" ? "h-full w-2.5" : "h-2.5 flex-col",
        className,
      )}
      {...props}
    >
      <ScrollAreaPrimitive.Thumb className="relative flex-1 rounded-full bg-neutral-950/20 transition-colors hover:bg-neutral-950/35 dark:bg-white/20 dark:hover:bg-white/35" />
    </ScrollAreaPrimitive.Scrollbar>
  );
}

export default ScrollArea;

2f:T40d,import { ScrollArea } from "@/components/scalar-ui/scroll-area"; const releases = Array.from({ length: 24 }, (_, i) => ({ version: `v4.${23 - i}.0`, date: new Date(2026, 9, 10 - i * 4).toLocaleDateString("en", { month: "short", day: "numeric" }), })); export default function Demo() { return (

Releases

{releases.map((r) => (

{r.version} {r.date}

))}

); } 30:T28a1,

import { ScrollArea } from "@/components/scalar-ui/scroll-area";

const releases = Array.from({ length: 24 }, (_, i) => ({
  version: `v4.${23 - i}.0`,
  date: new Date(2026, 9, 10 - i * 4).toLocaleDateString("en", { month: "short", day: "numeric" }),
}));

export default function Demo() {
  return (
    <ScrollArea className="h-72 w-60 rounded-[22px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]">
      <div className="p-2">
        <p className="px-3 pb-1 pt-2 text-[11.5px] font-medium uppercase tracking-[0.06em] text-neutral-400">Releases</p>
        {releases.map((r) => (
          <div key={r.version} className="flex items-center justify-between rounded-xl px-3 py-2 text-[13.5px]">
            <span className="font-mono text-[12.5px] text-neutral-900 dark:text-white">{r.version}</span>
            <span className="text-neutral-500 dark:text-neutral-400">{r.date}</span>
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}

31:T44a,import { ScrollArea } from "@/components/scalar-ui/scroll-area"; const albums = [ ["Night Drive", "from-indigo-500 to-violet-500"], ["Low Tide", "from-sky-400 to-cyan-500"], ["Ember", "from-orange-400 to-rose-500"], ["Fern", "from-emerald-400 to-teal-500"], ["Static", "from-neutral-500 to-neutral-800"], ["Bloom", "from-pink-400 to-fuchsia-500"], ["Dune", "from-amber-300 to-orange-500"], ]; export default function Example() { return (

{albums.map(([name, gradient]) => (

{name}

))}

); } 32:T26f7,

import { ScrollArea } from "@/components/scalar-ui/scroll-area";

const albums = [
  ["Night Drive", "from-indigo-500 to-violet-500"],
  ["Low Tide", "from-sky-400 to-cyan-500"],
  ["Ember", "from-orange-400 to-rose-500"],
  ["Fern", "from-emerald-400 to-teal-500"],
  ["Static", "from-neutral-500 to-neutral-800"],
  ["Bloom", "from-pink-400 to-fuchsia-500"],
  ["Dune", "from-amber-300 to-orange-500"],
];

export default function Example() {
  return (
    <ScrollArea orientation="horizontal" className="w-full max-w-[460px] rounded-[22px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]">
      <div className="flex gap-3 p-4">
        {albums.map(([name, gradient]) => (
          <figure key={name} className="w-32 shrink-0">
            <div className={`aspect-square rounded-2xl bg-gradient-to-br ${gradient}`} />
            <figcaption className="mt-2 text-[13px] font-medium text-neutral-800 dark:text-neutral-200">{name}</figcaption>
          </figure>
        ))}
      </div>
    </ScrollArea>
  );
}

33:T40f,import { ScrollArea } from "@/components/scalar-ui/scroll-area"; const people = ["Maya Chen", "Jon Park", "Ari Levi", "Sam Ortiz", "Noor Haddad", "Lena Weiss", "Theo Grant", "Ivy Moreau", "Kai Tanaka", "Rosa Diaz", "Omar Aziz", "Zoe Clarke"]; export default function Example() { return (

{people.map((p) => (

{p.split(" ").map((n) => n[0]).join("")} {p}

))}

); } 34:T26a5,

import { ScrollArea } from "@/components/scalar-ui/scroll-area";

const people = ["Maya Chen", "Jon Park", "Ari Levi", "Sam Ortiz", "Noor Haddad", "Lena Weiss", "Theo Grant", "Ivy Moreau", "Kai Tanaka", "Rosa Diaz", "Omar Aziz", "Zoe Clarke"];

export default function Example() {
  return (
    <ScrollArea fade className="h-64 w-60 rounded-[22px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]">
      <div className="p-2">
        {people.map((p) => (
          <div key={p} className="flex items-center gap-3 rounded-xl px-3 py-2">
            <span className="flex size-7 items-center justify-center rounded-full bg-neutral-100 text-[11px] font-semibold text-neutral-600 dark:bg-white/[0.08] dark:text-neutral-300">
              {p.split(" ").map((n) => n[0]).join("")}
            </span>
            <span className="text-[13.5px] text-neutral-800 dark:text-neutral-200">{p}</span>
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}

35:T1b3b,

import { ScrollArea } from "@/components/scalar-ui/scroll-area";

const log = Array.from({ length: 30 }, (_, i) => `[12:0${i % 10}:${String(i * 7 % 60).padStart(2, "0")}] build  step ${i + 1}/30  compiled packages/web/src/routes/dashboard/settings/members/page.tsx in ${(i * 37) % 900}ms`);

export default function Example() {
  return (
    <ScrollArea orientation="both" className="h-60 w-full max-w-[460px] rounded-[22px] bg-neutral-950 ring-1 ring-black/[0.06] dark:ring-white/[0.08]">
      <pre className="p-4 font-mono text-[12px] leading-relaxed text-neutral-300">{log.join("\n")}</pre>
    </ScrollArea>
  );
}

36:T16be,

import { ScrollArea } from "@/components/scalar-ui/scroll-area";

export default function Example() {
  return (
    <ScrollArea type="always" className="h-56 w-72 rounded-[22px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]">
      <div className="space-y-3 p-5 pr-6 text-[13.5px] leading-relaxed text-neutral-600 dark:text-neutral-400">
        {Array.from({ length: 6 }, (_, i) => (
          <p key={i}>
            Section {i + 1}. The scrollbar stays visible with type="always", which suits panels where people need to see there is
            more to read before they start scrolling.
          </p>
        ))}
      </div>
    </ScrollArea>
  );
}

29:["$","section","scroll-area",{"id":"scroll-area","aria-labelledby":"scroll-area-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"scroll-area-title","className":"sr-only","children":"Scroll Area"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"radix-ui"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"scroll-area","gated":{"unlocked":true,"files":[{"name":"scroll-area.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"horizontal":{"name":"horizontal.tsx","code":"$31","html":"$32"},"fade-edges":{"name":"fade-edges.tsx","code":"$33","html":"$34"},"both":{"name":"both.tsx","code":"import { ScrollArea } from \"@/components/scalar-ui/scroll-area\";\n\nconst log = Array.from({ length: 30 }, (_, i) => `[12:0${i % 10}:${String(i * 7 % 60).padStart(2, \"0\")}] build step ${i + 1}/30 compiled packages/web/src/routes/dashboard/settings/members/page.tsx in ${(i * 37) % 900}ms`);\n\nexport default function Example() {\n return (\n \n

{log.join(\"\\n\")}

\n \n );\n}\n","html":"$35"},"always-visible":{"name":"always-visible.tsx","code":"import { ScrollArea } from \"@/components/scalar-ui/scroll-area\";\n\nexport default function Example() {\n return (\n \n

\n {Array.from({ length: 6 }, (_, i) => (\n

\n Section {i + 1}. The scrollbar stays visible with type=\"always\", which suits panels where people need to see there is\n more to read before they start scrolling.\n

\n ))}\n

\n \n );\n}\n","html":"$36"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add scroll-area","shadcn":"npx shadcn@latest add https://scalarui.com/r/scroll-area.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install radix-ui","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L37","toolbar":"$L38"}]}],["$L39","$L3a","$L3b","$L3c"]]}]

Scroll Areas

Scroll Areas

Horizontal

Fade Edges

Both Axes

Always Visible