Murasaki
Components

Scroll Area

Adds consistently styled scrollbars without changing native scrolling.

Release note 1

Release note 2

Release note 3

Release note 4

Release note 5

Release note 6

Release note 7

Release note 8

Release note 9

Release note 10

Release note 11

Release note 12

Usage

import { ScrollArea } from '@murasakijs/ui'

<ScrollArea className="h-72 w-80 rounded-md border">
  <div className="p-4">Long content…</div>
</ScrollArea>

Set an explicit height or maximum height so overflow can occur. The viewport keeps native wheel, trackpad, touch, and keyboard scrolling. ScrollArea adds a vertical bar automatically. Add <ScrollBar orientation="horizontal" /> as a child when horizontal scrolling is part of the design; avoid two-dimensional scroll regions when a responsive layout can remove the overflow.

Improve this page on GitHub

On this page