Scroll area

A scrolling region with a thin scrollbar that appears only when you need it.

Hover the list or scroll it to show the scrollbar.

Fig. 1 A long list of releases in a fixed height. Point at it or scroll to see the scrollbar.

When to use it

Use Scroll Area for a region that scrolls inside the page, such as a long list in a panel or a wide code sample. It caps the height and keeps the page itself still.

Don’t wrap the whole page in it; let the page scroll natively.

How it behaves

Give ScrollArea a height (h-*) or a cap (max-h-*); its viewport inherits the cap, so content shorter than it does not leave empty space. The viewport scrolls natively, so wheel, touch, and keyboard scrolling all work.

The scrollbar is a 4px overlay thumb that takes no layout space. It fades in over 150ms while the pointer is over the area, appears at once while it scrolls, and has a wider invisible strip so it stays easy to grab.

The viewport is focusable and shows the 2px focus ring, so keyboard users can scroll it. Inside page content it sets only overscroll-behavior-x: none, so vertical scrolling still reaches the page at either end.

Both scrollbars sit on the area's visible edges and mount only while their axis overflows. Wrap a CodeBlockFile in ScrollArea to cap a long file: unwrapped code then scrolls sideways with the area, so the horizontal scrollbar stays at the bottom edge and the line numbers stay pinned.

Build it

Add it with the shadcn CLI:

Terminal

A complete example. Change the values to fit your product:

scroll-area-example.tsx

The full source is yours to edit once installed:

scroll-area.tsx