Components
Scroll Area
Augments native scroll functionality for custom, cross-browser styling, built on Radix UI.
Install
npx shadcn@latest add https://atomx.acau.net/r/scroll-area.jsonUsage
Wrap any overflowing content in ScrollArea to get custom-styled scrollbars that match the design system across browsers. Set a fixed height (or max-height) on the ScrollArea so its viewport has something to scroll within.
<ScrollArea className="h-72 w-48 rounded-md border">
<div className="p-4">{children}</div>
</ScrollArea>Preview
Long list
Props
ScrollArea extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>.
| Prop | Type | Notes |
|---|---|---|
type | "auto" | "always" | "scroll" | "hover" | When scrollbars are visible. Defaults to "hover". |
scrollHideDelay | number | Delay before scrollbars hide, in ms. |
dir | "ltr" | "rtl" | Reading direction. |
ScrollBar extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>.
| Prop | Type | Notes |
|---|---|---|
orientation | "vertical" | "horizontal" | Scrollbar axis. Defaults to "vertical". |