Haedong
039

Scroll Area

Layout

001 registry item 1

002 registry item 2

003 registry item 3

004 registry item 4

005 registry item 5

006 registry item 6

007 registry item 7

008 registry item 8

009 registry item 9

010 registry item 10

011 registry item 11

012 registry item 12

013 registry item 13

014 registry item 14

015 registry item 15

016 registry item 16

017 registry item 17

018 registry item 18

019 registry item 19

020 registry item 20

021 registry item 21

022 registry item 22

023 registry item 23

024 registry item 24

Customize

Axis

Code

<ScrollArea className="h-40 w-64 border border-border p-3">
  {lines.map((l) => <p key={l}>{l}</p>)}
</ScrollArea>

Install

npx shadcn@latest add https://components.haedong.dev/r/scroll-area.json

Props

Extends the native div props. Give it a size (h-*, max-h-*, w-*) and it scrolls on whichever axis overflows. Only the scrollbar is styled — the thumb is a page-surface plate with a full-strength hairline that inverts on hover; wheel, touch, keyboard and assistive tech scrolling are the browser's. Firefox has no scrollbar parts and shows its thin scrollbar in the foreground color instead.

PropTypeDescription
classNamestringSize and box: h-40 w-64 border border-border p-3.
childrenReactNodeThe content that may overflow.