Scroll Area

A scroll area wraps content in a custom scrollable viewport with minimal, styled scrollbars. Built on Base UI's ScrollArea primitive, it provides a consistent cross-browser scrolling experience while remaining keyboard accessible.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Item 21

Item 22

Item 23

Item 24

Item 25

Item 26

Item 27

Item 28

Item 29

Item 30

Item 31

Item 32

Item 33

Item 34

Item 35

Item 36

Item 37

Item 38

Item 39

Item 40

Item 41

Item 42

Item 43

Item 44

Item 45

Item 46

Item 47

Item 48

Item 49

Item 50

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

export default function ScrollAreaDemo() {
  const items = Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`)

  return (
    <ScrollArea className="h-72 w-48 rounded-md border p-4">
      <div className="space-y-2">
        {items.map((item) => (
          <div key={item} className="text-sm">
            {item}
          </div>
        ))}
      </div>
    </ScrollArea>
  )
}

Anatomy

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

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

Examples

Vertical scroll

<ScrollArea className="h-72 w-48 rounded-md border">
  <div className="p-4">
    {Array.from({ length: 50 }, (_, i) => (
      <div key={i} className="py-1 text-sm">Item {i + 1}</div>
    ))}
  </div>
</ScrollArea>

Horizontal scroll

Add a ScrollBar with orientation="horizontal" alongside horizontally overflowing content.

<ScrollArea className="w-96 rounded-md border">
  <div className="flex gap-4 p-4">
    {Array.from({ length: 20 }, (_, i) => (
      <div key={i} className="w-40 shrink-0 rounded-md border p-4">
        Card {i + 1}
      </div>
    ))}
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

Fixed-height list

<ScrollArea className="h-48 rounded-md border">
  <div className="p-4 space-y-2">
    <h4 className="mb-4 text-sm font-medium">Tags</h4>
    {["React", "Vue", "Svelte", "Angular", "Solid", "Qwik", "Astro", "Next.js", "Nuxt", "Remix"].map((tag) => (
      <div key={tag} className="text-sm">{tag}</div>
    ))}
  </div>
</ScrollArea>

API Reference

ScrollArea

The root container. Renders a relatively positioned wrapper that contains the viewport, scrollbar, and corner elements.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

Accepts all props from Base UI's ScrollArea.Root.

ScrollBar

A styled scrollbar track with a thumb indicator. Automatically included in ScrollArea for vertical scrolling. Add an additional ScrollBar for horizontal content.

Prop	Type	Default	Description
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	The scrollbar axis.
`className`	`string`	—

Accepts all props from Base UI's ScrollArea.Scrollbar.