ScrollArea

Utility

Custom scrollbar implementation with virtual scrolling, horizontal/vertical modes, and smooth scrolling

ScrollArea

Custom scrollbars with smooth scrolling and variants. Use for scrollable lists, galleries, code blocks and app layouts.

Basic vertical scroll

Wrap content with ScrollArea to add a custom vertical scrollbar with consistent styling.

Scrollable list (vertical)

Document-1.pdf
24 KB
Document-2.pdf
36 KB
Document-3.pdf
48 KB
Document-4.pdf
60 KB
Document-5.pdf
72 KB
Document-6.pdf
84 KB
Document-7.pdf
96 KB
Document-8.pdf
108 KB
Document-9.pdf
120 KB
Document-10.pdf
132 KB
Document-11.pdf
144 KB
Document-12.pdf
156 KB
Document-13.pdf
168 KB
Document-14.pdf
180 KB
Document-15.pdf
192 KB
Document-16.pdf
204 KB
Document-17.pdf
216 KB
Document-18.pdf
228 KB
Document-19.pdf
240 KB
Document-20.pdf
252 KB
Document-21.pdf
264 KB
Document-22.pdf
276 KB
Document-23.pdf
288 KB
Document-24.pdf
300 KB
Document-25.pdf
312 KB
Document-26.pdf
324 KB
Document-27.pdf
336 KB
Document-28.pdf
348 KB
Document-29.pdf
360 KB
Document-30.pdf
372 KB

Horizontal scroll

Use orientation="horizontal" for carousels and strips of content like cards, media or tags.

Scrollable gallery (horizontal)

Album 1

10 tracks

Album 2

11 tracks

Album 3

12 tracks

Album 4

13 tracks

Album 5

14 tracks

Album 6

15 tracks

Album 7

16 tracks

Album 8

17 tracks

Album 9

18 tracks

Album 10

19 tracks

Album 11

20 tracks

Album 12

21 tracks

Album 13

22 tracks

Album 14

23 tracks

Album 15

24 tracks

Both directions

Combine vertical and horizontal scrollbars for large canvases or tables.

Grid content (both axes)

Cell 1Content that overflows both directions.
Cell 2Content that overflows both directions.
Cell 3Content that overflows both directions.
Cell 4Content that overflows both directions.
Cell 5Content that overflows both directions.
Cell 6Content that overflows both directions.
Cell 7Content that overflows both directions.
Cell 8Content that overflows both directions.
Cell 9Content that overflows both directions.
Cell 10Content that overflows both directions.
Cell 11Content that overflows both directions.
Cell 12Content that overflows both directions.
Cell 13Content that overflows both directions.
Cell 14Content that overflows both directions.
Cell 15Content that overflows both directions.
Cell 16Content that overflows both directions.
Cell 17Content that overflows both directions.
Cell 18Content that overflows both directions.
Cell 19Content that overflows both directions.
Cell 20Content that overflows both directions.
Cell 21Content that overflows both directions.
Cell 22Content that overflows both directions.
Cell 23Content that overflows both directions.
Cell 24Content that overflows both directions.
Cell 25Content that overflows both directions.
Cell 26Content that overflows both directions.
Cell 27Content that overflows both directions.
Cell 28Content that overflows both directions.
Cell 29Content that overflows both directions.
Cell 30Content that overflows both directions.
Cell 31Content that overflows both directions.
Cell 32Content that overflows both directions.

Root / viewport composition

Use ScrollAreaRoot, ScrollAreaViewport, ScrollBar and ScrollAreaCorner to build fully custom scroll layouts.

Manual composition with bars

Line 1. Scroll this content using the custom scrollbar tracks and thumbs.

Line 2. Scroll this content using the custom scrollbar tracks and thumbs.

Line 3. Scroll this content using the custom scrollbar tracks and thumbs.

Line 4. Scroll this content using the custom scrollbar tracks and thumbs.

Line 5. Scroll this content using the custom scrollbar tracks and thumbs.

Line 6. Scroll this content using the custom scrollbar tracks and thumbs.

Line 7. Scroll this content using the custom scrollbar tracks and thumbs.

Line 8. Scroll this content using the custom scrollbar tracks and thumbs.

Line 9. Scroll this content using the custom scrollbar tracks and thumbs.

Line 10. Scroll this content using the custom scrollbar tracks and thumbs.

Line 11. Scroll this content using the custom scrollbar tracks and thumbs.

Line 12. Scroll this content using the custom scrollbar tracks and thumbs.

Line 13. Scroll this content using the custom scrollbar tracks and thumbs.

Line 14. Scroll this content using the custom scrollbar tracks and thumbs.

Line 15. Scroll this content using the custom scrollbar tracks and thumbs.

Line 16. Scroll this content using the custom scrollbar tracks and thumbs.

Line 17. Scroll this content using the custom scrollbar tracks and thumbs.

Line 18. Scroll this content using the custom scrollbar tracks and thumbs.

Line 19. Scroll this content using the custom scrollbar tracks and thumbs.

Line 20. Scroll this content using the custom scrollbar tracks and thumbs.

Line 21. Scroll this content using the custom scrollbar tracks and thumbs.

Line 22. Scroll this content using the custom scrollbar tracks and thumbs.

Line 23. Scroll this content using the custom scrollbar tracks and thumbs.

Line 24. Scroll this content using the custom scrollbar tracks and thumbs.

File browser layout

Create scrollable file lists with icons, metadata and nested folders.

Scrollable file list

/projects/saha-ui
Document-1.pdf
Modified 2 days ago
Document-2.pdf
New
Document-3.pdf
Modified 2 days ago
Document-4.pdf
New
Document-5.pdf
Modified 2 days ago
Document-6.pdf
New
Document-7.pdf
Modified 2 days ago
Document-8.pdf
New
Document-9.pdf
Modified 2 days ago
Document-10.pdf
New
Document-11.pdf
Modified 2 days ago
Document-12.pdf
New
Document-13.pdf
Modified 2 days ago
Document-14.pdf
New
Document-15.pdf
Modified 2 days ago
Document-16.pdf
New
Document-17.pdf
Modified 2 days ago
Document-18.pdf
New
Document-19.pdf
Modified 2 days ago
Document-20.pdf
New
Document-21.pdf
Modified 2 days ago
Document-22.pdf
New
Document-23.pdf
Modified 2 days ago
Document-24.pdf
New
Document-25.pdf
Modified 2 days ago
Document-26.pdf
New
Document-27.pdf
Modified 2 days ago
Document-28.pdf
New
Document-29.pdf
Modified 2 days ago
Document-30.pdf
New

Media gallery & cards

Design horizontally scrolling media galleries with cards and previews.

Media strip

Asset 1

Scroll horizontally to explore media items.

Asset 2

Scroll horizontally to explore media items.

Asset 3

Scroll horizontally to explore media items.

Asset 4

Scroll horizontally to explore media items.

Asset 5

Scroll horizontally to explore media items.

Asset 6

Scroll horizontally to explore media items.

Asset 7

Scroll horizontally to explore media items.

Asset 8

Scroll horizontally to explore media items.

Asset 9

Scroll horizontally to explore media items.

Asset 10

Scroll horizontally to explore media items.

Asset 11

Scroll horizontally to explore media items.

Asset 12

Scroll horizontally to explore media items.

Variant showcase

Use variant to align scrollbars and track styling with your theme.

Semantic variants

Default
Variant default – item 1
Variant default – item 2
Variant default – item 3
Variant default – item 4
Variant default – item 5
Variant default – item 6
Variant default – item 7
Variant default – item 8
Variant default – item 9
Variant default – item 10
Primary
Variant primary – item 1
Variant primary – item 2
Variant primary – item 3
Variant primary – item 4
Variant primary – item 5
Variant primary – item 6
Variant primary – item 7
Variant primary – item 8
Variant primary – item 9
Variant primary – item 10
Secondary
Variant secondary – item 1
Variant secondary – item 2
Variant secondary – item 3
Variant secondary – item 4
Variant secondary – item 5
Variant secondary – item 6
Variant secondary – item 7
Variant secondary – item 8
Variant secondary – item 9
Variant secondary – item 10
Accent
Variant accent – item 1
Variant accent – item 2
Variant accent – item 3
Variant accent – item 4
Variant accent – item 5
Variant accent – item 6
Variant accent – item 7
Variant accent – item 8
Variant accent – item 9
Variant accent – item 10
Success
Variant success – item 1
Variant success – item 2
Variant success – item 3
Variant success – item 4
Variant success – item 5
Variant success – item 6
Variant success – item 7
Variant success – item 8
Variant success – item 9
Variant success – item 10
Warning
Variant warning – item 1
Variant warning – item 2
Variant warning – item 3
Variant warning – item 4
Variant warning – item 5
Variant warning – item 6
Variant warning – item 7
Variant warning – item 8
Variant warning – item 9
Variant warning – item 10
Error
Variant error – item 1
Variant error – item 2
Variant error – item 3
Variant error – item 4
Variant error – item 5
Variant error – item 6
Variant error – item 7
Variant error – item 8
Variant error – item 9
Variant error – item 10
Info
Variant info – item 1
Variant info – item 2
Variant info – item 3
Variant info – item 4
Variant info – item 5
Variant info – item 6
Variant info – item 7
Variant info – item 8
Variant info – item 9
Variant info – item 10
Outline
Variant outline – item 1
Variant outline – item 2
Variant outline – item 3
Variant outline – item 4
Variant outline – item 5
Variant outline – item 6
Variant outline – item 7
Variant outline – item 8
Variant outline – item 9
Variant outline – item 10
Glass
Variant glass – item 1
Variant glass – item 2
Variant glass – item 3
Variant glass – item 4
Variant glass – item 5
Variant glass – item 6
Variant glass – item 7
Variant glass – item 8
Variant glass – item 9
Variant glass – item 10

Usage Guidelines

When to Use

  • Custom scrollbars
  • Dropdowns
  • Sidebars

Accessibility

  • Keyboard scrolling works
  • Scroll position not announced

Performance

  • Native scroll with overlay scrollbar
  • Minimal JavaScript

Common Mistakes

  • ScrollArea for main content
  • Hiding scrollbar completely

Frequently Asked Questions

ScrollArea provides custom styled scrollbars that match your theme across all browsers.
Yes, ScrollArea supports both vertical and horizontal scrolling.

View on GitHub

See the full source code on GitHub

Related Components

View all
Affix

Affix element to viewport with configurable offset and boundary constraints

Chart

Comprehensive charting system with 10 chart types (Line, Bar, Area, Pie, Radar, RadialBar, Scatter, Composed, Funnel, Treemap), responsive design, and data transformations

Collapsible

Animated collapsible content with controlled expansion, smooth transitions, and accessibility

Resizable

Resizable panel system with drag handles, min/max constraints, and layout persistence

Previous

Result

Next

Section