Next.js Scroll Area with the App Router

Drivn installs through a small CLI that writes component source directly into your repository — there is no runtime package to version-lock. From the root of your Next.js 16 project run npx drivn add scroll-area. The Scroll Area imports nothing past React and the local cn utility, so the CLI writes a single scroll-area.tsx file and leaves the rest of your tree untouched. The CLI reference documents every flag, including targeting a custom directory or installing several components at once. After install you own the file, and future Drivn releases will not overwrite it — commit it for a clean baseline before wiring it into a layout. If the same screen renders a long option list, pair it with the Drivn Select or a Card from the same install.

Because the Scroll Area holds no state and calls no browser API, scroll-area.tsx ships without a 'use client' directive — you can render it straight inside a Server Component in a Next.js App Router page, no client boundary required. The one thing the component does not do for you is set a height: it defaults to orientation="vertical" (overflow-y-auto overflow-x-hidden), but a div only scrolls once its content overflows a fixed size, so pass a className with h-* or max-h-*. <ScrollArea className="h-48"> caps the region at twelve rem and scrolls anything taller. Any extra props — id, aria-label, onScroll — spread onto the underlying <div> through the ...props rest, so it behaves like a plain scroll container with a themed scrollbar. Drop it around a long comment thread, a tag list, or a table of contents and the content scrolls inside the box instead of pushing the page down.

Switch the scroll direction with the orientation prop. The default vertical applies overflow-y-auto overflow-x-hidden; passing orientation="horizontal" swaps in overflow-x-auto overflow-y-hidden so the region scrolls sideways instead. A horizontal rail suits a row of cards, a gallery strip, or a set of filter chips that would otherwise wrap onto a second line. Give the inner content a w-max — or fixed-width children in a flex row — so it exceeds the container width and triggers the horizontal scroll, the same way a vertical area needs a fixed height. The orientations map is the whole switch: two keys, one per axis, read by the styles.orientations[orientation] lookup. Because both axes share the same scrollbar theme, a horizontal rail gets the identical thin, rounded scrollbar as the vertical default without any extra CSS.

Every class the component renders lives in one styles object at the top of the file, and the base key is where the cross-engine work happens. For Firefox it sets [scrollbar-width:thin] and [scrollbar-color:var(--border)_transparent], painting a thin scrollbar tinted with your theme's border token over a transparent track. For Chrome, Edge, and Safari it stacks a set of [&::-webkit-scrollbar] rules: the bar is w-1.5 / h-1.5, the track is transparent and rounded-full, the thumb is rounded-full with bg-border, and on hover the thumb deepens to bg-muted-foreground/30. The [&::-webkit-scrollbar-corner] rule keeps the corner where two scrollbars meet transparent. Because both the Firefox and WebKit paths reference the same design tokens (--border, --muted-foreground), the scrollbar matches your palette in dark and light mode without a second declaration.

Because the scrollbar is defined entirely in the styles.base object you own, restyling it is a matter of editing Tailwind utilities in one place. Make the bar thicker by bumping [&::-webkit-scrollbar]:w-1.5 to w-2 (and the matching h-1.5); change the thumb color by swapping [&::-webkit-scrollbar-thumb]:bg-border for bg-primary/40; or soften the hover state on [&:hover::-webkit-scrollbar-thumb]:bg-muted-foreground/30. Since the defaults read theme tokens — --border for the resting thumb, --muted-foreground for hover — adjusting those tokens in theming re-themes every scroll area for dark and light mode at once, with no per-instance overrides. You can also pass a one-off className; it merges after styles.base through cn(), so a call site can raise the height, add a border, or tweak padding without touching the shared component. For copy-paste layouts and stateful patterns see the Scroll Area examples.