Scroll Area
A container with custom styled scrollbars for scrollable content, providing a consistent cross-browser scrollbar appearance that integrates with your design system's theme and color variables.
Default
A basic vertical
ScrollArea with a fixed Height of 200px. The scrollbar appears on hover by default (controlled by the Type parameter set to Hover). Content that exceeds the container height becomes scrollable with a styled scrollbar thumb.Horizontal
A scroll area configured for horizontal scrolling by setting
Orientation to ScrollAreaOrientation.Horizontal. This is ideal for image galleries, card carousels, and any content that extends beyond the container width. The horizontal scrollbar appears below the content on hover.Both Directions
A scroll area that supports both vertical and horizontal scrolling by setting
Orientation to ScrollAreaOrientation.Both. This is useful for displaying wide tables, code blocks, or any content that may overflow in both dimensions simultaneously.Scrollbar Types
The
Type parameter controls scrollbar visibility behavior. Always keeps scrollbars visible at all times, Hover shows them only on mouse hover, Hidden completely hides scrollbars while preserving scroll functionality, and Auto follows the browser default behavior.Fill Container
Set
FillContainer to true to automatically fill the remaining vertical space in a flex column parent container using CSS flex-1 min-h-0. This eliminates manual Height or MaxHeight calculations in header/content/footer layouts where the scroll area should take up all available space.Chat Messages
A real-world chat message list pattern using
ScrollArea with MaxHeight to constrain the messages container. This composition combines scroll area with message bubbles, showing how the component integrates into application layouts where content grows dynamically.