Layout

Scroll area

A styled overflow container.

Server safeSource

Import

import { ScrollArea } from '@the_viveksingh/vivek-ui'

A scrolling region

Styles the scrollbar without replacing it, so native momentum, keyboard scrolling and the OS accessibility settings all still work.

Row 1

Row 2

Row 3

Row 4

Row 5

Row 6

Row 7

Row 8

Row 9

Row 10

Row 11

Row 12

Row 13

Row 14

Row 15

Row 16

Row 17

Row 18

Row 19

Row 20

<ScrollArea style={{ height: '10rem' }}>
  <Stack gap={2}>
    {rows.map((row) => (
      <Text key={row}>{row}</Text>
    ))}
  </Stack>
</ScrollArea>

Horizontal

Row 1

Row 2

Row 3

Row 4

Row 5

Row 6

Row 7

Row 8

Row 9

Row 10

Row 11

Row 12

Row 13

Row 14

Row 15

Row 16

Row 17

Row 18

Row 19

Row 20

<ScrollArea orientation="horizontal">
  <Stack direction="horizontal" gap={3} style={{ width: 'max-content' }}>
    {items.map((item) => (
      <Text key={item} className="tile">{item}</Text>
    ))}
  </Stack>
</ScrollArea>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for ScrollArea
Prop	Type	Default	Description
`orientation`	`'vertical' \| 'horizontal' \| 'both'`	—	Which axis may overflow. Default `vertical`.
`scrollbar`	`'auto' \| 'always' \| 'hidden'`	—	`auto` — a scrollbar appears when the content overflows (the browser default). `always` — the track is reserved, so the content never reflows when it starts to overflow. `hidden` — the scrollbar is not painted, but the area still scrolls with the wheel, a trackpad, touch, and the keyboard. Default `auto`.
`thickness`	`'thin' \| 'auto'`	—	Scrollbar thickness where the browser lets us pick. Default `thin`.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

ScrollArea carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.