Scroll Area

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/scroll-area.json

npx shadcn@latest add https://prototyper-ui.com/r/scroll-area.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/scroll-area.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/scroll-area.json

This will add the following files to your project:

components/ui/scroll-area.tsx

Usage

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

<ScrollArea className="h-72 w-48 rounded-md border">
  <div className="p-4">
    {/* Long content here */}
  </div>
</ScrollArea>

Anatomy

<ScrollArea>
  {/* ScrollArea.Viewport, ScrollBar, and ScrollArea.Corner are rendered internally */}
  <div>Your scrollable content</div>
</ScrollArea>

Sub-component	`data-slot`	Purpose	Required
`ScrollArea`	`scroll-area`	Root container with built-in viewport/scrollbar	Yes
`ScrollBar`	`scroll-area-scrollbar`	Scrollbar track (vertical or horizontal)	Internal
Viewport	`scroll-area-viewport`	Scrollable viewport container	Internal
Thumb	`scroll-area-thumb`	Draggable scrollbar indicator	Internal

Note: The viewport, scrollbar, thumb, and corner are rendered automatically inside the ScrollArea component. You only need to provide child content.

Styling

Data Slots

Use data-slot attributes to target specific parts of the scroll area:

Slot name	Element
`scroll-area`	Root wrapper
`scroll-area-viewport`	Scrollable viewport
`scroll-area-scrollbar`	Scrollbar track
`scroll-area-thumb`	Scrollbar thumb indicator

Customization Examples

/* Make the scrollbar wider */
[data-slot="scroll-area-scrollbar"] {
  @apply w-3.5;
}

/* Custom thumb color */
[data-slot="scroll-area-thumb"] {
  @apply bg-primary/50;
}

{/* Add horizontal scrollbar with the ScrollBar component */}
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"

<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
  <div className="flex w-max space-x-4 p-4">
    {items.map((item) => (
      <div key={item} className="w-40 shrink-0">{item}</div>
    ))}
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

API Reference

ScrollArea

Root component that provides a scrollable viewport with custom scrollbars. Renders a vertical scrollbar by default.

Prop

Type

All Base UI ScrollArea.Root props are forwarded via ...props.

ScrollBar

A scrollbar track with a draggable thumb. One vertical scrollbar is rendered by default inside ScrollArea. Use this component to add an additional horizontal scrollbar.