Scroll Area
Used to create a scrollable area with custom styled scrollbars
Usage
import { ScrollArea } from "@chakra-ui/react"<ScrollArea.Root>
<ScrollArea.Viewport>
<ScrollArea.Content />
</ScrollArea.Viewport>
<ScrollArea.Scrollbar>
<ScrollArea.Thumb />
</ScrollArea.Scrollbar>
<ScrollArea.Corner />
</ScrollArea.Root>Examples
Variants
Use the variant prop to change the scrollbar visibility behavior. Values can
be either hover (default) or always.
variant="hover"
variant="always"
Sizes
Use the size prop to change the size of the scroll area. This affects the
scrollbar thickness and content padding.
size="xs"
size="sm"
size="md"
size="lg"
Horizontal Scrolling
The scroll area automatically supports horizontal scrolling when content overflows horizontally.
Both Directions
When content overflows in both directions, both scrollbars will appear.
ScrollArea.Corner component to show a corner indicator to
fill the intersection of the two scrollbars for a seamless, styled appearance.Scroll Shadow
Add visual feedback when content is scrollable by implementing scroll shadows
that appear at the edges using mask-image.
Thumb Styling
Customize the appearance of the scrollbar thumb with different styles and colors.
Stick to Bottom
Implement chat-like behavior where new content automatically scrolls to the bottom, but allows manual scrolling.
This example uses use-stick-to-bottom to scroll pinning.
Virtualization
Handle large datasets efficiently by rendering only visible items using
@tanstack/react-virtual.
Store
Use the scroll area with external state management and programmatic control.
Scroll to Side
Programmatically navigate through content by scrolling to different sides and directions.
Scroll to Position
Jump to specific positions or items within the scrollable area with smooth animations.
RTL Support
The scroll area component fully supports Right-to-Left (RTL) languages like Arabic and Hebrew.
With Menu
Combine scroll area with other components like menus to handle overflowing content. This example shows how to create a scrollable menu with many items.
Props
Root
| Prop | Default | Type |
|---|---|---|
colorPalette | gray | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'The color palette of the component |
variant | hover | 'hover' | 'always'The variant of the component |
size | md | 'xs' | 'sm' | 'md' | 'lg'The size of the component |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
unstyled | booleanWhether to remove the component's style. | |
ids | Partial<{ root: string; viewport: string; content: string; scrollbar: string; thumb: string }>The ids of the scroll area elements |
Viewport
| Prop | Default | Type |
|---|---|---|
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Content
| Prop | Default | Type |
|---|---|---|
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Scrollbar
| Prop | Default | Type |
|---|---|---|
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
orientation | Orientation |
Thumb
| Prop | Default | Type |
|---|---|---|
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Corner
| Prop | Default | Type |
|---|---|---|
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Explorer
Explore the Scroll Area component parts interactively. Click on parts in the
sidebar to highlight them in the preview.
Component Anatomy
Hover to highlight, click to select parts
root
viewport
content
scrollbar
thumb
corner