Scroll Area

A scrolling region with macOS overlay scrollers that appear while you scroll.

@cupertinoui/scroll-areaBase UI Scroll Area Registry JSON

Software Updates

macOS 27.0.0 (Build 26A300)

macOS 27.7.1 (Build 26A301)

macOS 27.4.2 (Build 26A302)

macOS 27.1.3 (Build 26A303)

macOS 27.8.0 (Build 26A304)

macOS 27.5.1 (Build 26A305)

macOS 27.2.2 (Build 26A306)

macOS 27.9.3 (Build 26A307)

macOS 27.6.0 (Build 26A308)

macOS 27.3.1 (Build 26A309)

macOS 27.0.2 (Build 26A310)

macOS 27.7.3 (Build 26A311)

macOS 27.4.0 (Build 26A312)

macOS 27.1.1 (Build 26A313)

macOS 27.8.2 (Build 26A314)

macOS 27.5.3 (Build 26A315)

macOS 27.2.0 (Build 26A316)

macOS 27.9.1 (Build 26A317)

macOS 27.6.2 (Build 26A318)

macOS 27.3.3 (Build 26A319)

macOS 27.0.0 (Build 26A320)

macOS 27.7.1 (Build 26A321)

macOS 27.4.2 (Build 26A322)

macOS 27.1.3 (Build 26A323)

macOS 27.8.0 (Build 26A324)

macOS 27.5.1 (Build 26A325)

macOS 27.2.2 (Build 26A326)

macOS 27.9.3 (Build 26A327)

macOS 27.6.0 (Build 26A328)

macOS 27.3.1 (Build 26A329)

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

const versions = Array.from({ length: 30 }, (_, index) => `macOS 27.${(index * 7) % 10}.${index % 4} (Build 26A${300 + index})`)

// Scroll to see the overlay scroller; hover it to widen it.
export default function ScrollAreaDemo() {
  return (
    <ScrollArea className="h-56 w-64 rounded-[12px] bg-mac-content shadow-[0_0_0_1px_var(--mac-grid)]">
      <div className="p-3">
        <div className="mb-2 text-mac-subheadline font-semibold text-mac-label-secondary">Software Updates</div>
        {versions.map((version) => (
          <div key={version} className="border-b border-mac-grid py-1.5 text-mac-body text-mac-label last:border-0">
            {version}
          </div>
        ))}
      </div>
    </ScrollArea>
  )
}

Installation

pnpm dlx shadcn@latest add @cupertinoui/scroll-area

The first install also adds the macOS theme. See Installation to set up the registry.

Usage

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

<ScrollArea className="h-56">…</ScrollArea>

API Reference

Every part forwards the props of the underlying Base UI Scroll Area part. The props below are the ones CupertinoUI adds or changes.

ScrollArea / ScrollBar

Prop	Type	Description
`orientation`	`"vertical" \| "horizontal"` Default: `"vertical"`	ScrollBar's direction; add a horizontal one for wide content.
`className`	`string`	Extra classes, merged with the component's own.