Scroll Area

A native scroll container with custom scrollbars.

API Reference

Preview

Installation

Usage

import { ScrollArea } from "@/components/ui/scroll-area"
<ScrollArea style={{ height: 200 }}>
  Long scrollable content goes here...
</ScrollArea>

API Reference

ScrollArea

Root component. Styled wrapper for ScrollArea.Root from Base UI. Automatically includes both horizontal and vertical scrollbars.

ScrollBar

Scrollbar track with built-in thumb. Styled wrapper for ScrollArea.Scrollbar from Base UI.

Examples

Both Scrollbars

Scroll Fade

Use scrollFade to mask the viewport edges so content subtly fades in and out as you scroll.