zeroUI

Scroll area

A box that scrolls with zeroUI's own bars: a thin track and a slanted thumb that leans like a slab.

Install

terminal
# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/scroll-area

Examples

A route log

scroll-area-log.tsx
import { ScrollArea } from "@/components/zero/scroll-area";const log = Array.from({ length: 24 }, (_, index) => {  const minute = String(10 + index * 2).padStart(2, "0");  const stops = [    "Harbor",    "Rail yards",    "Canal docks",    "Tower 9",    "Old market",  ];  return `21:${minute.slice(-2)} · Passed ${stops[index % stops.length]}`;});export default function ScrollAreaLog() {  return (    <ScrollArea className="h-64 w-full max-w-xs border-(length:--zero-stroke-thin) border-zero-line bg-zero-void">      <ol className="grid gap-2 p-4 font-medium font-zero-text text-zero-sm text-zero-text-2">        {log.map((line) => (          <li key={line}>{line}</li>        ))}      </ol>    </ScrollArea>  );}

Behaviour

The bars stay out of sight until the box is pointed at or scrolled, and the thumb lights to the accent while it is held. The wheel, touch and the keyboard scroll as usual; the viewport can take focus to scroll by keys.

Give the ScrollArea a height (or a max height); its content scrolls inside it, either way.

Props

ScrollArea

Also takes every prop of Base UI's ScrollArea.Root.

ScrollBar

PropTypeDefaultDescription
orientation"vertical" | "horizontal""vertical"ScrollArea draws both; use it alone to build your own.

Also takes every prop of Base UI's ScrollArea.Scrollbar.