--- title: Scroll Area description: Augments native scroll functionality for custom, cross-browser styling. base: radix component: true links: doc: https://www.radix-ui.com/docs/primitives/components/scroll-area api: https://www.radix-ui.com/docs/primitives/components/scroll-area#api-reference --- ## Installation Command Manual ```bash npx shadcn@latest add scroll-area ``` Install the following dependencies: ```bash npm install radix-ui ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx showLineNumbers import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area" ``` ```tsx showLineNumbers Your scrollable content here. ``` ## Composition Use the following composition to build a `ScrollArea`: ```text ScrollArea └── ScrollBar ``` ## Examples ### Horizontal Use `ScrollBar` with `orientation="horizontal"` for horizontal scrolling. ## RTL To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl). ## API Reference See the [Radix UI Scroll Area](https://www.radix-ui.com/docs/primitives/components/scroll-area#api-reference) documentation.