How to Add a Scroll Area to a React App

Before installing Scroll Area, confirm your React project has the three things Drivn assumes: Tailwind CSS v4 installed and processing your styles, TypeScript configured (the component ships as a .tsx file), and a @/ path alias pointing at your source directory. If you scaffolded with create-next-app, npm create vite, or npx drivn@latest create, all three are already wired; for a custom setup the installation page lists the minimal config. The Scroll Area is the lightest kind of Drivn install — it imports nothing past React and the cn utility for class merging, so there is no peer component, no icon package, and no runtime dependency to version-lock. The one thing to keep in mind before you render it is that a Scroll Area only scrolls when its content overflows a constrained box, so the parent layout has to give it a height or a width to work against.

Run the CLI from your project root to add the Scroll Area source file. The command prompts once for your install directory (defaulting to src/components/ui/) and writes a single scroll-area.tsx — no other files, because the component has no peer dependencies beyond React and the cn utility. No global config file is created; the result is TypeScript source you edit like any other component. Confirm it landed in your editor, then commit it for a clean baseline. If your project uses a monorepo layout or a non-standard source path, the CLI docs cover the flags for targeting a custom location during install. Because the file is yours after install, future Drivn releases will not overwrite your edits.

Import ScrollArea from your UI directory and wrap the content that should scroll. The component defaults to orientation="vertical" (overflow-y-auto overflow-x-hidden), but a <div> only scrolls once its content overflows a fixed size — so the one required step is passing a height through className. h-48 caps the box at twelve rem and scrolls anything taller; max-h-64 lets a short list stay compact and only scrolls once it grows past the cap. Because the Scroll Area holds no state and ships without a 'use client' directive, this renders fine inside a Server Component with no client boundary. Any extra props — id, aria-label, onScroll — spread onto the underlying <div> through the ...props rest. Drop it around a tag list, a comment thread, or a table of contents, or wrap it in a Drivn Card for a bounded, scrollable panel.

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. 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 width greater than the container — usually a flex row with w-max and fixed-width children — so it overflows the x-axis and triggers the 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. Both axes share the same thin, themed scrollbar, so a horizontal rail looks identical to the vertical default with no extra CSS. Unlike a Carousel, this is plain native scrolling — no slides, no autoplay — which is right when the content is browse-anywhere rather than step-through.

Every class the component renders lives in one styles object at the top of the file you own, and the base key is where the cross-engine scrollbar work happens. For Firefox it sets [scrollbar-width:thin] and [scrollbar-color:var(--border)_transparent]; 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. Widen the bar by bumping the w-1.5 and h-1.5 values, or tint the thumb by swapping bg-border for bg-primary/40. Because both the Firefox and WebKit paths reference the --border and --muted-foreground tokens, adjusting those in theming re-themes every scroll area for dark and light mode at once. A one-off className merges after styles.base through cn(), so a single call site can raise the height or add a border without touching the shared file. For copy-paste layouts see the Scroll Area examples.