Scroll area

Custom scrollable region with a styled scrollbar. Use when native overflow would break a fixed layout.

Examples

Vertical

Standard UI components share tokens for color, type, and motion so surfaces feel consistent across products.

Scroll areas keep long content reachable without stretching the layout. Prefer a fixed height and a vertical scrollbar when the panel sits beside other controls.

Keyboard focus stays on the viewport. Use clear headings and short paragraphs so scanning remains easy while scrolling.

Pair scroll areas with cards, sidebars, and dialogs when the body can grow beyond the available space.

Keep scrollbar thumbs quiet — border tokens, not brand fill — so content stays the focus of attention.

Horizontal

One

Two

Three

Four

Five

Six

Overview

Scroll area composes a root, viewport, content, scrollbar, and thumb. Give the root a fixed height (or width for horizontal scroll) so overflow can appear. Built on Base UI Scroll Area.

tsx

import {
  ScrollArea,
  ScrollAreaViewport,
  ScrollAreaContent,
  ScrollAreaScrollbar,
  ScrollAreaThumb,
} from "@standard-ui/react"

<ScrollArea className="h-48">
  <ScrollAreaViewport>
    <ScrollAreaContent>
      {/* long content */}
    </ScrollAreaContent>
  </ScrollAreaViewport>
  <ScrollAreaScrollbar orientation="vertical">
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
</ScrollArea>

Usage

Structure

Put scrollable children inside ScrollAreaContent, nested in ScrollAreaViewport. Add a scrollbar with matching orientation and a ScrollAreaThumb.

tsx

<ScrollArea className="h-48 w-full">
  <ScrollAreaViewport>
    <ScrollAreaContent className="p-4">
      …
    </ScrollAreaContent>
  </ScrollAreaViewport>
  <ScrollAreaScrollbar orientation="vertical">
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
</ScrollArea>

Orientation

Set orientation="vertical" or "horizontal" on the scrollbar. Default is vertical.

tsx

<ScrollAreaScrollbar orientation="vertical">
  <ScrollAreaThumb />
</ScrollAreaScrollbar>

API

Parts mirror Base UI Scroll Area. Style the root for size and overflow; compose scrollbar and thumb for the track.

Part	Role
ScrollArea	Root container. Set a fixed height or width.
ScrollAreaViewport	Focusable scrolling viewport.
ScrollAreaContent	Wraps the scrollable children.
ScrollAreaScrollbar	Track for vertical or horizontal scroll.
ScrollAreaThumb	Draggable thumb inside the scrollbar.

ScrollAreaScrollbar

Prop	Type	Default	Description
orientation	"vertical" \| "horizontal"	"vertical"	Scroll direction the bar controls.
keepMounted	boolean	false	Keep the bar in the DOM when content is not scrollable.