A thin scrollbar, and logs that follow their end, pause, count and load older lines in place.
Import it and pass your content. The props that matter most are listed next.
import * as React from "react";
import { JumpToLatest, ScrollArea, useFollow } from "@/components/ui/notchset/scroll-area";
export function Log({ lines }: { lines: string[] }) {
const viewport = React.useRef<HTMLDivElement>(null);
const follow = useFollow(viewport);
return (
<div className="relative">
<ScrollArea viewportRef={viewport} viewportLabel="Run log" className="h-80">
{lines.map((l, i) => <div key={i}>{l}</div>)}
</ScrollArea>
{!follow.following && <JumpToLatest count={follow.unseen} onClick={follow.jump} />}
</div>
);
}viewportRef (ScrollArea)–
Ref<HTMLDivElement>The scrolling element, for useFollow or your own logic.
viewportLabel (ScrollArea)–
stringNames the scrolling region.
useFollow(viewportRef)–
{ following, unseen, appended, prepend, jump }Follow the end; count lines while paused; keep place when prepending.
ScrollAreadata-slot="scroll-area"
Root, viewport and both scrollbars.
ScrollBardata-slot="scroll-area-scrollbar"
A scrollbar, vertical or horizontal.
useFollow / JumpToLatestdata-slot="scroll-jump"
Follow a log's end and jump back to it.
components/ui/notchset/scroll-area.tsx
pnpm dlx shadcn@latest add https://notchset.dev/r/scroll-area.jsonpnpm dlx shadcn@latest add https://notchset.dev/r/radix-nova/scroll-area.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @notchset registry added, @notchset/<name> picks for you.
pnpm add @base-ui/react@^1The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
Give your coding assistant the Markdown guide instead of screenshots.
https://notchset.dev/api/mcp (setup)v1.0.0 · 2026-10-04
First release