Yugen UI

ScrollArea

ScrollArea replaces the browser's default scrollbar with a thin Fluent-style one that appears on hover.

Built on Radix Scroll Area, so native scrolling (wheel, touch, keyboard) still works. orientation picks a vertical scrollbar, a horizontal one or both.

Versions

v2.30.0
v2.29.0
v2.28.0
v2.27.0
v2.26.0
v2.25.0
v2.24.0
v2.23.0
v2.22.0
v2.21.0
v2.20.0
v2.19.0
v2.18.0
v2.17.0
v2.16.0
v2.15.0
v2.14.0
v2.13.0
v2.12.0
v2.11.0
v2.10.0
v2.9.0
v2.8.0
v2.7.0
v2.6.0
v2.5.0
v2.4.0
v2.3.0
v2.2.0
v2.1.0

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX
// npm install yugen-uiimport { ScrollArea, ScrollBar } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Mountains at dawn
Mountains at dawn
Hills at sunset
Hills at sunset
Pine forest
Pine forest
Lake at night
Lake at night
Desert
Desert

Horizontal

orientation="horizontal" for strips of cards or images.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

Both directions

orientation="both" for a grid larger than its frame.

Usage

Do
  • Give the ScrollArea a fixed height or width so the scroll region is clear.
  • Use it for panels and long lists inside small surfaces (Popover, Card, Drawer).
Don't
  • Don't wrap the whole page in a ScrollArea. Let the browser scroll the page.
  • Don't nest scroll areas that scroll in the same direction.

Props

Prop · TypeDefaultDescription
orientation"vertical" | "horizontal" | "both"Default: "vertical"Scrollbars shown.
type"hover" | "scroll" | "auto" | "always"Default: "hover"When the scrollbars appear (Radix).
viewportClassNamestringDefault: —Class for the inner viewport.
ScrollBar.orientation"vertical" | "horizontal"Default: "vertical"For composing the Radix primitives yourself.