Scroll area

A native scroll container with custom scrollbars.

Preview

Vernacular architecture grows from local materials, climate, and the habits of the people who build it. It is practical knowledge made visible in walls, roofs, windows, and courtyards.

In warm regions, deep roof overhangs protect rooms from sun and rain. Openings on opposite walls let air move through the home without mechanical cooling.

Builders often use stone, clay, or timber found nearby. These materials shape the color and texture of a place while reducing the need to transport heavy supplies.

Courtyards provide light and shared outdoor space. Their proportions vary with the climate and with how families work, gather, and rest throughout the day.

Installation

Install the local ghost-kit source bundle while the registry runs at localhost:3110. It contains this component and its source dependencies. Prepare the local registry first so token dependencies also resolve locally.

Install

npx shadcn@latest add http://localhost:3110/r/ghost-kit.json

Basic usage

123import { ScrollArea } from "@/components/ui/scroll-area";

<ScrollArea.Root aria-label="Reading content"><ScrollArea.Viewport><ScrollArea.Content>Long content</ScrollArea.Content></ScrollArea.Viewport></ScrollArea.Root>

Use the exported component in the composition shown above. Keep labels, data, and callbacks in the consuming application.

Structure

Examples

Both scrollbars

Use a corner when content overflows in both directions.

Project 1

Project 2

Project 3

Project 4

Project 5

Project 6

Project 7

Project 8

Project 9

Project 10

Project 11

Project 12

Project 13

Project 14

Project 15

Project 16

Gradient scroll fade

Use a quiet edge fade when a reading surface needs a softer boundary.

Vernacular architecture grows from local materials, climate, and the habits of the people who build it. It is practical knowledge made visible in walls, roofs, windows, and courtyards.

In warm regions, deep roof overhangs protect rooms from sun and rain. Openings on opposite walls let air move through the home without mechanical cooling.

Builders often use stone, clay, or timber found nearby. These materials shape the color and texture of a place while reducing the need to transport heavy supplies.

Courtyards provide light and shared outdoor space. Their proportions vary with the climate and with how families work, gather, and rest throughout the day.

Combining with Tabs

Keep each tab panel independently scrollable.

Vernacular architecture grows from local materials, climate, and the habits of the people who build it. It is practical knowledge made visible in walls, roofs, windows, and courtyards.

In warm regions, deep roof overhangs protect rooms from sun and rain. Openings on opposite walls let air move through the home without mechanical cooling.

Builders often use stone, clay, or timber found nearby. These materials shape the color and texture of a place while reducing the need to transport heavy supplies.

Courtyards provide light and shared outdoor space. Their proportions vary with the climate and with how families work, gather, and rest throughout the day.

API reference

scroll-area properties
Prop	Type	Description
`className`	`string \| ((state: BaseUI.ScrollAreaRootState) => string \| undefined) \| undefined`	CSS class applied to the element, or a function that returns a class based on the component's state.
`style`	`React.CSSProperties \| ((state: BaseUI.ScrollAreaRootState) => React.CSSProperties \| undefined) \| undefined`	Style applied to the element, or a function that returns a style object based on the component's state.
`render`	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| BaseUI.ComponentRenderFn<BaseUI.HTMLProps, BaseUI.ScrollAreaRootState> \| undefined`	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`overflowEdgeThreshold`	`number \| Partial<{ xStart: number; xEnd: number; yStart: number; yEnd: number; }> \| undefined`	The threshold in pixels that must be passed before the overflow edge attributes are applied. Accepts a single number for all edges or an object to configure them individually.

This component wraps Base UI scroll-area for its behavior.