ScrollArea

Custom-styled scrollable container built on Radix UI with themed scrollbar and support for vertical, horizontal, or both axes.

Live Demo

Vertical

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

Horizontal

ReactTypeScriptNext.jsTailwindRadix UIStorybookVitestTurborepo

Props

Prop	Type	Default	Description
`orientation`	`'vertical' \| 'horizontal' \| 'both'`	`'vertical'`	Which scrollbar(s) to render.
`children`	`React.ReactNode`	`—`	Scrollable content.
`className`	`string`	`—`	Extra CSS class on the root element.

Usage

import { ScrollArea } from '@ghiberti85/ui'

// Vertical (default)
<ScrollArea style={{ height: 200 }}>
  {items.map(i => <div key={i}>{i}</div>)}
</ScrollArea>

// Horizontal
<ScrollArea orientation="horizontal" style={{ width: 300 }}>
  <div style={{ display: 'flex', gap: 8, width: 'max-content' }}>
    {tags.map(t => <span key={t}>{t}</span>)}
  </div>
</ScrollArea>

// Both axes
<ScrollArea orientation="both" style={{ height: 200, width: 300 }}>
  <div style={{ width: 600, height: 600 }}>Large content</div>
</ScrollArea>

View in Storybook

Open in Storybook →

←EmptyState