Scroll Area

A scrollable region with a themed scrollbar, styled through the standard scrollbar properties rather than a JavaScript overlay — so native momentum and keyboard scrolling stay intact.

src/components/ui/scroll-area.tsx

About

From the component's own source, where it was written.

A bounded scrollable region.

The scrollbar itself is styled globally in index.css, so this only decides which axis scrolls — it exists to make that intent explicit at the call site rather than to restyle anything.

Install

npx astralyx-ui add scroll-area

Usage

import { ScrollArea } from '@/components/ui/scroll-area'

<ScrollArea className="h-64">…</ScrollArea>

Composer

Change the props and the source below follows.

Row 1 — scrollable content

Row 2 — scrollable content

Row 3 — scrollable content

Row 4 — scrollable content

Row 5 — scrollable content

Row 6 — scrollable content

Row 7 — scrollable content

Row 8 — scrollable content

Row 9 — scrollable content

Row 10 — scrollable content

Row 11 — scrollable content

Row 12 — scrollable content

Row 13 — scrollable content

Row 14 — scrollable content

Row 15 — scrollable content

Row 16 — scrollable content

Row 17 — scrollable content

Row 18 — scrollable content

Row 19 — scrollable content

Row 20 — scrollable content

Row 21 — scrollable content

Row 22 — scrollable content

Row 23 — scrollable content

Row 24 — scrollable content

Props

orientation

tsx

<ScrollArea orientation="vertical" className="h-64">
  …
</ScrollArea>

Examples

Vertical

tsx

<ScrollArea className="h-48">…</ScrollArea>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`ScrollArea`

A bounded scrollable region.

Extends ComponentProps<'div'>.

Prop	Type	Default	Description
orientation	'vertical' \| 'horizontal' \| 'both'	'vertical'	Which axis scrolls.
className	string	—	Where the height comes from — a scroll area needs a bounded size to scroll at all.