About the shadcn/ui Scroll Area Component
The Scroll Area component is part of shadcn/ui — a collection of accessible, copy-paste React components built with Radix UI and Tailwind CSS. Install it with `npx shadcn@latest add scroll-area` and copy it directly into your project.
Scroll Area Component — Frequently Asked Questions
How do I set a fixed height for shadcn ScrollArea?
Add a `className` with a height: `<ScrollArea className="h-72 w-full">`. The scroll area will clip content and show scrollbars when it overflows.
How do I enable horizontal scrolling in ScrollArea?
Add `orientation="horizontal"` to `<ScrollArea>` and ensure the inner content is wider than the container. Use `overflow-x-auto` patterns work here.
When should I use ScrollArea instead of CSS overflow?
Use ScrollArea when you need custom-styled scrollbars that match your design system and are consistent across browsers (Chrome, Firefox, Safari all handle scrollbars differently).