Karigiri Kit
ComponentsTokensPlaygroundStorybook

Scroll Area

A scrollable container with a slim custom scrollbar styled to match your tokens. Supports vertical, horizontal, and both-axis scrolling.

Vertical

Set a height or maxHeight to constrain the area. The custom scrollbar appears on hover and is styled to match the design tokens.

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
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30

Horizontal

Set orientation="horizontal" to scroll sideways. Vertical overflow is hidden.

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

Both axes

orientation="both" enables scrolling in both directions simultaneously.

Item 1 — wider content to demonstrate horizontal scrolling
Item 2 — wider content to demonstrate horizontal scrolling
Item 3 — wider content to demonstrate horizontal scrolling
Item 4 — wider content to demonstrate horizontal scrolling
Item 5 — wider content to demonstrate horizontal scrolling
Item 6 — wider content to demonstrate horizontal scrolling
Item 7 — wider content to demonstrate horizontal scrolling
Item 8 — wider content to demonstrate horizontal scrolling
Item 9 — wider content to demonstrate horizontal scrolling
Item 10 — wider content to demonstrate horizontal scrolling
Item 11 — wider content to demonstrate horizontal scrolling
Item 12 — wider content to demonstrate horizontal scrolling
Item 13 — wider content to demonstrate horizontal scrolling
Item 14 — wider content to demonstrate horizontal scrolling
Item 15 — wider content to demonstrate horizontal scrolling
Item 16 — wider content to demonstrate horizontal scrolling
Item 17 — wider content to demonstrate horizontal scrolling
Item 18 — wider content to demonstrate horizontal scrolling
Item 19 — wider content to demonstrate horizontal scrolling
Item 20 — wider content to demonstrate horizontal scrolling
Item 21 — wider content to demonstrate horizontal scrolling
Item 22 — wider content to demonstrate horizontal scrolling
Item 23 — wider content to demonstrate horizontal scrolling
Item 24 — wider content to demonstrate horizontal scrolling
Item 25 — wider content to demonstrate horizontal scrolling
Item 26 — wider content to demonstrate horizontal scrolling
Item 27 — wider content to demonstrate horizontal scrolling
Item 28 — wider content to demonstrate horizontal scrolling
Item 29 — wider content to demonstrate horizontal scrolling
Item 30 — wider content to demonstrate horizontal scrolling

Max height

Use maxHeight instead of height when the content may be shorter than the limit — the area won't add extra space in that case.

Item 1
Item 2
Item 3
Item 4
Item 5