Scroll Area
Augments native scroll functionality for custom, cross-browser styling.
Loading example…
Installation
bunx --bun shadcn@latest add @sui/scroll-areaInstall with the shadcn CLI or use the shared @workspace/ui package. Follow the installation guide to configure the registry, load styles, and choose import aliases.
Usage
import { ScrollArea, ScrollBar } from "@workspace/ui/components/scroll-area"<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
Your scrollable content here.
</ScrollArea>Composition
Use the following composition to build a ScrollArea:
ScrollArea
└── ScrollBarHorizontal
Use ScrollBar with orientation="horizontal" for horizontal scrolling.
Loading example…
RTL
To enable RTL support in shadcn/ui, see the RTL configuration guide.
Loading example…
API Reference
See the Base UI Scroll Area documentation.