Component

Scroll Area

Thin, theme-aware scrollbars (wraps Base UI ScrollArea).

Vertical scroll

Scrollable line 1

Scrollable line 2

Scrollable line 3

Scrollable line 4

Scrollable line 5

Scrollable line 6

Scrollable line 7

Scrollable line 8

Scrollable line 9

Scrollable line 10

Scrollable line 11

Scrollable line 12

Scrollable line 13

Scrollable line 14

Scrollable line 15

Scrollable line 16

Scrollable line 17

Scrollable line 18

Scrollable line 19

Scrollable line 20

Horizontal scroll

Content wider than the frame scrolls sideways on its own thin scrollbar. Both scrollbars stay hidden until the area is hovered or scrolled.

Style the viewport

className sizes the outer frame; viewportClassName reaches the scrolling viewport inside it. Once content overflows, the viewport is what takes keyboard focus, so a focus ring belongs there.

Log entry 1

Log entry 2

Log entry 3

Log entry 4

Log entry 5

Log entry 6

Log entry 7

Log entry 8

Log entry 9

Log entry 10

Log entry 11

Log entry 12

Log entry 13

Log entry 14

Log entry 15

Log entry 16

Log entry 17

Log entry 18

Log entry 19

Log entry 20

Tab to the area, then scroll it with the arrow keys, Page Up and Page Down

API reference

Prop	Type	Default	Description
className	string	None	Max height/width of the visible viewport before scrolling kicks in.
viewportClassName	string	None	Extra classes for the scrolling viewport inside, rather than the outer frame.

classNameNone

string

Max height/width of the visible viewport before scrolling kicks in.

viewportClassNameNone

string

Extra classes for the scrolling viewport inside, rather than the outer frame.

Also accepts everything from React.ComponentPropsWithoutRef<typeof import("@base-ui/react/scroll-area").ScrollArea.Root>.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent