Layoutreadycomponentready
Scroll Area
A native scroll container primitive with viewport, scrollbar, thumb, corner, focus, and app-owned content composition.
Import
import { ScrollArea, ScrollAreaViewport, ScrollBar } from 'radcn/scroll-area'Live package example
Render the upstream tag list and horizontal artwork Scroll Area examples with native scrolling and deterministic non-network artwork.
Example Parity
Render the upstream tag list and horizontal artwork Scroll Area examples with native scrolling and deterministic non-network artwork.
import { ScrollArea, ScrollAreaThumb, ScrollAreaViewport, ScrollBar } from 'radcn/scroll-area'
import { Separator } from 'radcn/separator'
const tags = Array.from({ length: 50 }, (_, index) => `v1.2.0-beta.${50 - index}`)
const artworks = [
{ artist: 'Ornella Binni', src: 'data:image/svg+xml,...' },
{ artist: 'Tom Byrom', src: 'data:image/svg+xml,...' },
{ artist: 'Vladimir Malyavko', src: 'data:image/svg+xml,...' },
]
export function ScrollAreaPreview() {
return (
<>
<ScrollArea style="width:12rem;height:18rem;">
<ScrollAreaViewport ariaLabel="Tags">
<div style="padding:1rem;">
<h4>Tags</h4>
{tags.map((tag, index) => (
<>
<div>{tag}</div>
{index < tags.length - 1 && <Separator />}
</>
))}
</div>
</ScrollAreaViewport>
<ScrollBar><ScrollAreaThumb /></ScrollBar>
</ScrollArea>
<ScrollArea style="width:24rem;">
<ScrollAreaViewport ariaLabel="Artwork gallery">
<div style="display:flex;width:max-content;gap:1rem;padding:1rem;white-space:nowrap;">
{artworks.map((artwork) => (
<figure>
<img src={artwork.src} alt={`Photo by ${artwork.artist}`} width="300" height="400" />
<figcaption>Photo by <strong>{artwork.artist}</strong></figcaption>
</figure>
))}
</div>
</ScrollAreaViewport>
<ScrollBar orientation="horizontal"><ScrollAreaThumb /></ScrollBar>
</ScrollArea>
</>
)
}Installation
Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.
pnpm add radcn # intended future package
import { ScrollArea, ScrollAreaViewport, ScrollBar } from 'radcn/scroll-area'Theming
RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.
<html data-radcn-theme-mode="system" data-radcn-theme="dark">
...
</html>Accessibility
- ScrollAreaViewport is focusable by default and can provide an ariaLabel for named scroll regions.
- Native overflow owns keyboard, pointer, and assistive-technology scroll behavior without a client-side scroll engine.
- Scrollbar, thumb, and corner parts are aria-hidden presentation while the viewport remains the accessible scroll container.
- Figure, figcaption, image alt text, headings, tag text, and Separator semantics remain authored content inside the viewport.
Customization
- ScrollArea exposes root, viewport, scrollbar, thumb, and corner hooks through data-radcn-scroll-area* attributes and package classes.
- Use class, style, and CSS variables to tune width, height, border, radius, background, thumb color, and corner color.
- Use ScrollBar orientation="horizontal" when an example needs explicit horizontal scroll affordance.
- Repeated content, Separator rows, image presentation, whitespace, max-content strip layout, and spacing stay app-owned composition.
Remix 3 Notes
- React props, Radix ScrollAreaPrimitive, className, data-slot, Tailwind utilities, and cn map to explicit RadCN props, class, public data hooks, package CSS, inline style, and CSS variables.
- The upstream default vertical ScrollBar maps to explicit ScrollBar composition in RadCN examples.
- React fragments and keys are upstream rendering mechanics; RadCN examples render ordinary repeated markup.
- next/image, remote Unsplash URLs, and image optimization are app presentation concerns, not RadCN dependencies.
- The horizontal artwork example uses deterministic non-network artwork data so tests do not depend on remote image loading.
- vendor source remains read-only evidence and is not imported by RadCN.