Scroll Area

Themed cross-browser scrollbars for vertical, horizontal, or both axes — content goes straight in.

ScrollArea wraps @radix-ui/react-scroll-area: themed scrollbars that render consistently across browsers. Content drops straight in — the viewport and scrollbar compose internally; you size the box.

Installation

import { ScrollArea } from "@iammikz/srui";

Usage

Tags
tag-1
tag-2
tag-3
tag-4
tag-5
tag-6
tag-7
tag-8
tag-9
tag-10
tag-11
tag-12
tag-13
tag-14
tag-15
tag-16
tag-17
tag-18
tag-19
tag-20
tag-21
tag-22
tag-23
tag-24

Horizontal — pass orientation="horizontal" (or "both"):

tag-1tag-2tag-3tag-4tag-5tag-6tag-7tag-8tag-9tag-10

Props

PropTypeDefaultDescription
orientation"vertical" | "horizontal" | "both""vertical"Which scrollbars to mount
className——Sizes the box (h-48, w-56, borders, padding)
…——Radix Root props (type, scrollHideDelay, …)

Exports

ExportNotes
ScrollAreaThe box — content in, themed scrollbar(s) out
ScrollBarStandalone scrollbar for custom Radix compositions
ScrollViewportEscape hatch for raw Radix composition

Accessibility

Native scrolling semantics are preserved — keyboard and wheel behave exactly like a native overflow container; the styled thumbs are pointer-only conveniences.