Scroll Area
A custom scrollable area with styled scrollbars.
Import
import { ScrollArea, ScrollBar } from "@retents/ui/scroll-area"Usage Guidelines
When to use
- When you need a scrollable container with custom-styled scrollbars that match the design system.
- For lists, menus, or content areas within a fixed-height container.
- When you want consistent scrollbar appearance across browsers.
When NOT to use
- For full-page scroll — use the browser's native scroll.
- When native scrollbar appearance is acceptable — adding a custom scroll area adds complexity.
- For horizontal-only content carousels — use Carousel instead.
Preview
Usage
<ScrollArea className="h-72 w-48 rounded-md border">
<div className="p-4">
{/* Long content here */}
</div>
</ScrollArea>