Layout

ScrollArea Scroll Area

A custom-styled scroll container supporting vertical and horizontal scrolling with a consistent cross-browser scrollbar appearance.

Installation

bash

pnpm dlx shadcn@latest add scroll-area -c packages/react

Basic

Tags

Tag 1

Tag 2

Tag 3

Tag 4

Tag 5

Tag 6

Tag 7

Tag 8

Tag 9

Tag 10

Tag 11

Tag 12

Tag 13

Tag 14

Tag 15

Tag 16

Tag 17

Tag 18

Tag 19

Tag 20

Tag 21

Tag 22

Tag 23

Tag 24

Tag 25

Tag 26

Tag 27

Tag 28

Tag 29

Tag 30

Tag 31

Tag 32

Tag 33

Tag 34

Tag 35

Tag 36

Tag 37

Tag 38

Tag 39

Tag 40

Tag 41

Tag 42

Tag 43

Tag 44

Tag 45

Tag 46

Tag 47

Tag 48

Tag 49

Tag 50

tsx

import { ScrollArea } from "@polyui/react/scroll-area"
import { Separator } from "@polyui/react/separator"
export function ScrollAreaBasic() {
  const tags = Array.from({ length: 50 }, (_, i) => `Tag ${i + 1}`)
  return (
    <ScrollArea className="h-64 w-56 rounded-xl border border-border">
      <div className="p-4">
        <h4 className="mb-4 text-sm font-semibold">Tags</h4>
        {tags.map((tag, i) => (
          <div key={tag}>
            <div className="text-sm py-1">{tag}</div>
            {i < tags.length - 1 && <Separator className="my-1" />}
          </div>
        ))}
      </div>
    </ScrollArea>
  )
}

Horizontal

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

tsx

import { ScrollArea, ScrollBar } from "@polyui/react/scroll-area"
export function ScrollAreaHorizontal() {
  const items = Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`)
  return (
    <ScrollArea className="w-96 whitespace-nowrap rounded-xl border border-border">
      <div className="flex gap-4 p-4">
        {items.map((item) => (
          <div key={item} className="w-32 shrink-0 rounded-lg bg-muted p-4 text-sm">
            {item}
          </div>
        ))}
      </div>
      <ScrollBar orientation="horizontal" />
    </ScrollArea>
  )
}

Props

ScrollArea

属性	类型	默认值	说明
`className`	`string`	`—`	Custom class, typically used to set width and height.
`children`	`React.ReactNode`	`—`	Content inside the scroll area.

ScrollBar

属性	类型	默认值	说明
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	Scrollbar orientation.