Scroll Area
A scrolling region with a slim scrollbar that shows while it's in use.
<ScrollArea sx={styles.tags}> <div> {tags.map((tag) => ( <div key={tag}>{tag}</div> ))} </div></ScrollArea>Installation
$ npx shadcn@latest add @constella/scroll-areaUsage
import { ScrollArea } from "@/components/primitives/scroll-area";Give it a height with sx; its content scrolls inside.
<ScrollArea sx={styles.box}>{content}</ScrollArea>Composition
ScrollArea└── ScrollBarScroll Bar
ScrollArea brings a vertical scrollbar. Add a ScrollBar with orientation="horizontal" for content that scrolls sideways.
<ScrollArea sx={styles.gallery}> <div {...stylex.props(styles.row)}>{tiles}</div> <ScrollBar orientation="horizontal" /></ScrollArea>Add both for content wider and taller than the area, like a wide table. The corner between them stays clear.
<ScrollArea sx={styles.sheet}> <table>…</table> <ScrollBar orientation="horizontal" /></ScrollArea>Scroll Fade
Pass Scroll Fade to viewportSx to fade the edges with more content past them.
<ScrollArea viewportSx={scrollFade.y}>{children}</ScrollArea>Pass hideScrollbar to drop the vertical scrollbar when the fade already shows there's more, like the docs sidebar.
<ScrollArea hideScrollbar sx={styles.list} viewportSx={scrollFade.y}> {items}</ScrollArea>API Reference
| Part | Adds |
|---|---|
ScrollArea | Renders the viewport, a vertical ScrollBar unless hideScrollbar, and the corner; viewportRef and viewportSx reach the element that scrolls, for a virtualizer, a data table's scrollRef or a Scroll Fade |
ScrollBar | Shows while the area is hovered or scrolling |
Every part takes sx, applied last. For the rest, see Base UI Scroll Area.