React Scroll Area Component Examples

The most common Scroll Area: a list capped at a fixed height. Set the height with a Tailwind class on className — h-48 here caps the box at 12rem — and the component scrolls anything past that point. The list inside is plain markup; the Scroll Area does not impose a structure, it only owns the overflow and the scrollbar. Because the component spreads React.HTMLAttributes<HTMLDivElement>, any extra <div> prop — id, role, aria-label, event handlers — flows straight through.

This is the right shape for a sidebar of navigation links, a list of search results, a notification feed, or any column that could grow past the space the layout gives it. The Scroll Area renders as a server component, so a static list like this needs no 'use client' directive at all. For a list of selectable rows, pair the Scroll Area with the Drivn Command menu, which already handles keyboard navigation inside its own scroll region.

For a swipeable row of cards or thumbnails, pass orientation="horizontal". The component switches to overflow-x-auto overflow-y-hidden, so the area scrolls sideways and clips the vertical axis. The child content has to be wider than the container for anything to scroll — wrap the items in a flex row with w-max so they lay out at their natural width and overflow past the edge instead of wrapping.

This pattern fits an image gallery, a row of product tiles, a preview strip, or a horizontal set of stat cards on a dashboard. Unlike a true Carousel, a horizontal Scroll Area has no slides, no autoplay, and no snap by default — it is plain native scrolling, which is exactly right when the content is browse-anywhere rather than step-through. Add snap-x and snap-start utilities to the children if you want scroll snapping. Each tile here is a fixed-width box; swap in a Drivn Card for richer content.

Overflow is the trigger, and overflow needs a boundary. The Scroll Area is a styled <div>, and a <div> sizes itself to its content, so an unconstrained one simply grows and never scrolls. Two className options fix that. A fixed height — h-72 — claims 18rem whether the content fills it or not. A cap — max-h-72 — lets the box shrink to short content and starts scrolling only once the content passes 18rem.

Pick the cap when the amount of content is unknown ahead of time: a comment thread, a filtered result set, a panel that expands. It avoids the tall empty rectangle a fixed height leaves behind on a near-empty state. Pick the fixed height when the surrounding layout needs the slot to stay put — a dashboard grid or a two-column page where a shifting box would push everything else around. Since cn() merges your classes over the base styles, arbitrary values like h-[420px] and responsive prefixes like md:h-96 both land. Horizontal areas follow the identical rule with width standing in for height.

A Scroll Area composes cleanly inside other containers. Drop one inside a Drivn Card to keep a long body — a chat log, an activity feed, an order history — from pushing the card and the rest of the page taller. The Card supplies the border, padding, and header; the Scroll Area owns only the overflow region, so the header stays pinned while the body scrolls underneath it.

The same composition works inside a Dialog: put a max-h-* Scroll Area around the dialog body and a long form or terms block scrolls within the modal instead of growing it off-screen. Because the Scroll Area is just a <div>, it nests anywhere a <div> is valid and adds no stacking-context or focus-trap surprises. The example below wraps a message list in a Card body; the flex flex-col on the list keeps messages stacked while the Scroll Area handles the overflow.

The Scroll Area does not render a scrollbar element — it restyles the browser's native one with CSS. Every rule lives in the styles.base string, reproduced verbatim from the registry below. Firefox reads scrollbar-width: thin and scrollbar-color, which set a slim bar tinted with the --border token on a transparent track. Chromium and Safari read the ::-webkit-scrollbar pseudo-elements: the bar is 1.5 units wide and tall, the thumb is rounded-full and bg-border, and on hover the thumb darkens to bg-muted-foreground/30.

Because the styling is plain CSS, the scrollbar follows the active theme automatically — the --border and --muted-foreground tokens flip with dark and light mode, so the bar never needs a theme-specific override. There is no prop to recolor the bar per instance; the look is intentionally uniform across every Scroll Area in the app. To change it globally, edit the styles.base string in your copy of the component — the file is yours after install. For the side-by-side with the Radix-backed alternative, see Drivn vs shadcn Scroll Area.