Scroll Area

The React Scroll Area component creates a scrollable container with custom scrollbars. It lets users scroll through content while keeping full control over the look and behavior.

It is useful when the content is larger than its container. For example, you can use it for long lists, tables, logs, or side panels with fixed height.

Built with Base UI and styled using Tailwind CSS, it supports vertical and horizontal scrolling, keyboard navigation, and accessible interactions.

Installation

Install the component using the Tailgrids CLI.

npx @tailgrids/cli add scroll-area

Anatomy

Import the component parts and combine them to create a scrollable area.

import {
  ScrollArea,
  ScrollAreaViewport,
  ScrollBar
} from "@/components/scroll-area";

export const ScrollAreaExample = () => (
  <ScrollArea>
    <ScrollAreaViewport>{/* Scrollable Content */}</ScrollAreaViewport>
    <ScrollBar orientation="vertical" />
    <ScrollBar orientation="horizontal" />
  </ScrollArea>
);

Examples

Basic Vertical Scroll

The most common use case for a scroll area, providing a custom vertical scrollbar for long lists or text blocks.

Horizontal Scroll

Use the orientation="horizontal" prop on the ScrollBar component to enable horizontal scrolling for wide content like carousels or data tables.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Both Axes

Enable both vertical and horizontal scrollbars for large content areas that exceed the container in both dimensions.

Multi-axis Scroll content

This area is larger than its container in both directions, demonstrating vertical and horizontal scrollbars.

API Reference

ScrollArea

The root component that groups all parts and manages the scroll state.

Prop	Type	Default	Description
`overflowEdgeThreshold`	`number \| { xStart?: number; xEnd?: number; yStart?: number; yEnd?: number } \| undefined`	`0`	Threshold in pixels before overflow edge attributes are applied.
`className`	`string`	-	Additional CSS classes for the root element.

ScrollAreaViewport

The actual scrollable container.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for the viewport.

ScrollBar

The scrollbar track and thumb component.

Prop	Type	Default	Description
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	The direction of movement for the scrollbar.
`keepMounted`	`boolean`	`false`	Whether to keep the element in the DOM when not scrollable.
`className`	`string`	-	Additional CSS classes for the scrollbar track.

Accessibility

Keyboard support: Users can scroll the content using keyboard keys when the scroll area is focused.
Scrollable container: The ScrollAreaViewport acts as the main scrollable region and should contain all scrollable content.
Custom scrollbars: Scrollbars are interactive and support mouse and touch drag.
Orientation support: Supports vertical and horizontal scrolling based on content size and scrollbar configuration.
Screen reader support: Use a clear structure and meaningful content within the scroll area so screen readers can interpret it correctly.

Scroll Area

CLI

Manual

Multi-axis Scroll content

On this page