Scroll area

Free

A labelled, keyboard-focusable scroll region with a quiet scrollbar.

Installs components/ui/scroll-area.tsxDepends on none beyond ReactMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/scroll-area.json

Deploy 1 finished
Deploy 2 finished
Deploy 3 finished
Deploy 4 finished
Deploy 5 finished
Deploy 6 finished
Deploy 7 finished
Deploy 8 finished
Deploy 9 finished
Deploy 10 finished
Deploy 11 finished
Deploy 12 finished

When to use #

Use it for

Fixed-height panels with long lists, like activity.
Regions that must be reachable with the keyboard.

Skip it when

The whole page scrolls; use the page.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/scroll-area.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

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

export function ActivityList() {
  return (
    <div className="w-full max-w-sm">
      <ScrollArea label="Activity" className="max-h-48">
        <ul className="divide-y divide-border">
          {Array.from({ length: 12 }, (_, index) => (
            <li key={index} className="px-3 py-2.5 text-sm">Deploy {index + 1} finished</li>
          ))}
        </ul>
      </ScrollArea>
    </div>
  );
}

API reference #

ScrollArea

component

PropTypeDefault

label *string—

children *ReactNode—

classNamestring—

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.