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.

A Scroll Area only scrolls when its content overflows a constrained box. The component is a styled <div>, and a <div> grows to fit its content by default, so without a height nothing overflows. There are two ways to constrain it, both set through className: a fixed height like h-72, which always reserves that space, or a max-height like max-h-72, which lets the area shrink for short content and only scrolls once the content grows past the cap.

Reach for max-h-* when the content length varies — a comment thread, a filtered result list, an expandable panel — so a near-empty state does not leave a tall blank box. Reach for a fixed h-* when the layout needs a stable, predictable slot regardless of content. Drivn merges the className onto the base styles through cn(), so arbitrary values like h-[420px] and responsive prefixes like md:h-96 all work. The same rule governs horizontal scrolling, where the constraint is a width rather than a 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.