Scroll Area Component

Augments native scroll functionality for custom, cross-browser styling.

Scroll Shadows

Scroll shadows automatically appear to indicate more content is available in that direction.

Vertical Shadows

Scroll to see shadows

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 Shadows

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
Card 11
Card 12
Card 13
Card 14
Card 15

Default (Vertical)

A scrollable area with custom styled scrollbar and scroll shadows.

Tags

v1.2.0-beta.1
v1.1.4
v1.1.3
v1.1.2
v1.1.1
v1.1.0
v1.0.9
v1.0.8
v1.0.7
v1.0.6
v1.0.5
v1.0.4
v1.0.3
v1.0.2
v1.0.1
v1.0.0

Horizontal Scroll

Scroll horizontally through content.

Sunset
John Doe - Sunset
Mountains
Jane Smith - Mountains
Ocean
Bob Wilson - Ocean
Forest
Alice Brown - Forest
City
Charlie Davis - City

Both Scrollbars

Scroll in both directions.

Large Content Area

Row 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Row 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Row 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Row 4: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Row 5: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Row 6: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Row 7: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Row 8: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Row 9: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Row 10: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Row 11: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Row 12: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Row 13: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Row 14: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Row 15: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Row 16: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Row 17: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Row 18: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Row 19: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Row 20: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Card List

Scrollable list of cards.

Item 1
2 min ago

This is the description for item 1. It contains some sample text to demonstrate scrolling.

Item 2
4 min ago

This is the description for item 2. It contains some sample text to demonstrate scrolling.

Item 3
6 min ago

This is the description for item 3. It contains some sample text to demonstrate scrolling.

Item 4
8 min ago

This is the description for item 4. It contains some sample text to demonstrate scrolling.

Item 5
10 min ago

This is the description for item 5. It contains some sample text to demonstrate scrolling.

Item 6
12 min ago

This is the description for item 6. It contains some sample text to demonstrate scrolling.

Item 7
14 min ago

This is the description for item 7. It contains some sample text to demonstrate scrolling.

Item 8
16 min ago

This is the description for item 8. It contains some sample text to demonstrate scrolling.

Item 9
18 min ago

This is the description for item 9. It contains some sample text to demonstrate scrolling.

Item 10
20 min ago

This is the description for item 10. It contains some sample text to demonstrate scrolling.

Chat Messages

Common chat/messaging interface pattern.

Chat

Hey! How are you?

10:00 AM

I'm good, thanks! How about you?

10:02 AM

Doing great! Did you see the new component library?

10:03 AM

Yes! It looks amazing. I love the scroll area component.

10:05 AM

The styling is really clean and consistent.

10:06 AM

Agreed! And the keyboard navigation works great too.

10:08 AM

Can't wait to use it in our project!

10:10 AM

Scroll Types

Different scrollbar visibility behaviors.

Auto (default)

Line 1

Line 2

Line 3

Line 4

Line 5

Line 6

Line 7

Line 8

Always Visible

Line 1

Line 2

Line 3

Line 4

Line 5

Line 6

Line 7

Line 8

Features

  • Custom styled scrollbars consistent across browsers
  • Vertical and horizontal scroll support
  • Multiple scroll types: Auto, Always, Scroll, Hover
  • Scroll shadows in both directions (new)
  • Enhanced scrollbar styling with hover states (new)
  • Works with any content
  • Tailwind CSS styling integration

Installation

@using BlazorUI.Components.ScrollArea

Usage

<ScrollArea Class="h-72 w-48 rounded-md border">
    <div class="p-4">
        <!-- Your scrollable content -->
    </div>
</ScrollArea>
An unhandled error has occurred. Reload 🗙