apps/www/content/docs/components/scroll-area.mdx
import { ScrollArea } from "@chakra-ui/react"
<ScrollArea.Root>
<ScrollArea.Viewport>
<ScrollArea.Content />
</ScrollArea.Viewport>
<ScrollArea.Scrollbar>
<ScrollArea.Thumb />
</ScrollArea.Scrollbar>
<ScrollArea.Corner />
</ScrollArea.Root>
Use the variant prop to change the scrollbar visibility behavior. Values can
be either hover (default) or always.
Use the size prop to change the size of the scroll area. This affects the
scrollbar thickness and content padding.
The scroll area automatically supports horizontal scrolling when content overflows horizontally.
<ExampleTabs name="scroll-area-horizontal" />When content overflows in both directions, both scrollbars will appear.
<ExampleTabs name="scroll-area-both-directions" />:::info
You can render the ScrollArea.Corner component to show a corner indicator to
fill the intersection of the two scrollbars for a seamless, styled appearance.
:::
Add visual feedback when content is scrollable by implementing scroll shadows
that appear at the edges using mask-image.
Use the data-overflow-y attribute to only show shadows when content actually
overflows—this prevents shadows from appearing when there's a single item or no
scrollable content.
Customize the appearance of the scrollbar thumb with different styles and colors.
<ExampleTabs name="scroll-area-with-thumb-styling" />Implement chat-like behavior where new content automatically scrolls to the bottom, but allows manual scrolling.
<ExampleTabs name="scroll-area-stick-to-bottom" />This example uses
use-stick-to-bottomto scroll pinning.
Handle large datasets efficiently by rendering only visible items using
@tanstack/react-virtual.
Use the scroll area with external state management and programmatic control.
<ExampleTabs name="scroll-area-with-store" />Programmatically navigate through content by scrolling to different sides and directions.
<ExampleTabs name="scroll-area-scroll-to-side" />Jump to specific positions or items within the scrollable area with smooth animations.
<ExampleTabs name="scroll-area-scroll-to-position" />The scroll area component fully supports Right-to-Left (RTL) languages like Arabic and Hebrew.
<ExampleTabs name="scroll-area-with-rtl" />Combine scroll area with other components like menus to handle overflowing content. This example shows how to create a scrollable menu with many items.
<ExampleTabs name="scroll-area-with-menu" />Explore the Scroll Area component parts interactively. Click on parts in the
sidebar to highlight them in the preview.