Components

Scroll Area

Bordered, max-height scroll region for long lists and panels—aligned with shadcn scroll-area ergonomics.

Tap to show a QR code for the Expo showcase deep link. The web preview below runs in the browser.

Line 1 — scroll inside the bordered region.

Line 2 — scroll inside the bordered region.

Line 3 — scroll inside the bordered region.

Line 4 — scroll inside the bordered region.

Line 5 — scroll inside the bordered region.

Line 6 — scroll inside the bordered region.

Line 7 — scroll inside the bordered region.

Line 8 — scroll inside the bordered region.

Line 9 — scroll inside the bordered region.

Line 10 — scroll inside the bordered region.

Line 11 — scroll inside the bordered region.

Line 12 — scroll inside the bordered region.

Line 13 — scroll inside the bordered region.

Line 14 — scroll inside the bordered region.

Installation

Install the registry item directly, then add any package dependencies if you are setting the component up manually.

Install the component

Run the registry command below to add scroll-area to your project.

watermelon add scroll-area

Import the component

Import Scroll Area from your local UI registry output.

Import

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

Import

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

Usage

Set maxHeight to cap the viewport; content scrolls inside the chrome.

Basic