ComponentsLayout

Scroll Area

A scrolling region with thin scrollbars that follow the theme. Fixed or content heights, vertical, horizontal, or both bars, and a bordered table frame for wide data grids.

Sizes

Each size with the variant and orientation it is used with. The bars appear only on axes that overflow.

size="sm" · plain · vertical · 10rem tall

Sample record 1 · Meadow project

Sample record 2 · Meadow project

Sample record 3 · Meadow project

Sample record 4 · Meadow project

Sample record 5 · Meadow project

Sample record 6 · Meadow project

Sample record 7 · Meadow project

Sample record 8 · Meadow project

Sample record 9 · Meadow project

Sample record 10 · Meadow project

Sample record 11 · Meadow project

Sample record 12 · Meadow project

Sample record 13 · Meadow project

Sample record 14 · Meadow project

Sample record 15 · Meadow project

Sample record 16 · Meadow project

size="md" · plain · both · 16rem tall, 40rem wide content

Sample record 1 · Meadow project

Sample record 2 · Meadow project

Sample record 3 · Meadow project

Sample record 4 · Meadow project

Sample record 5 · Meadow project

Sample record 6 · Meadow project

Sample record 7 · Meadow project

Sample record 8 · Meadow project

Sample record 9 · Meadow project

Sample record 10 · Meadow project

Sample record 11 · Meadow project

Sample record 12 · Meadow project

Sample record 13 · Meadow project

Sample record 14 · Meadow project

Sample record 15 · Meadow project

Sample record 16 · Meadow project

size="auto" · table · vertical · grows to 60dvh

Sample record 1 · Meadow project

Sample record 2 · Meadow project

Sample record 3 · Meadow project

Sample record 4 · Meadow project

Sample record 5 · Meadow project

Sample record 6 · Meadow project

Sample record 7 · Meadow project

Sample record 8 · Meadow project

Data grid

variant="table" with orientation="both". The table label names the region, and the header stays pinned while rows scroll.

Project	Bulb	Location	Status	Date	Owner
Meadow	Tulip ‘Apricot Beauty’	North bed	Planted	12 Oct	Dhruv
Meadow	Narcissus ‘Thalia’	Orchard edge	Ordered	14 Oct	Asha
Riverside	Allium ‘Purple Sensation’	Border 2	Planted	15 Oct	Lena
Riverside	Crocus tommasinianus	Lawn drift	Scheduled	18 Oct	Dhruv
Hilltop	Fritillaria meleagris	Wet meadow	Ordered	19 Oct	Asha
Hilltop	Camassia leichtlinii	Pond margin	Scheduled	21 Oct	Lena
Meadow	Tulip ‘Ballerina’	Cutting garden	Planted	22 Oct	Dhruv
Riverside	Muscari armeniacum	Path edge	Scheduled	24 Oct	Asha
Hilltop	Iris reticulata	Gravel bed	Ordered	25 Oct	Lena
Meadow	Anemone blanda	Woodland	Scheduled	27 Oct	Dhruv
Riverside	Scilla siberica	Under hedge	Planted	28 Oct	Asha
Hilltop	Tulip ‘Queen of Night’	Terrace pots	Scheduled	30 Oct	Lena
Orchard	Galanthus nivalis	Under pears	Ordered	2 Nov	Dhruv
Orchard	Eranthis hyemalis	Grass verge	Scheduled	3 Nov	Asha
Woodland	Erythronium ‘Pagoda’	Fern walk	Ordered	5 Nov	Lena
Woodland	Hyacinthoides non-scripta	Copse	Scheduled	6 Nov	Dhruv
Courtyard	Tulip ‘Black Parrot’	Large urns	Planted	8 Nov	Asha
Courtyard	Hyacinth ‘Woodstock’	Window boxes	Scheduled	9 Nov	Lena
Meadow	Tulip sylvestris	Long grass	Ordered	11 Nov	Dhruv
Riverside	Leucojum aestivum	Stream bank	Scheduled	12 Nov	Asha

Horizontal

orientation="horizontal" for a single row of cards. Shift + wheel, a trackpad swipe, or arrow keys on the focused region scroll it.

Meadow
Spring planting plan
24 tasks
Riverside
Wetland border refresh
11 tasks
Hilltop
Terrace pots and gravel
8 tasks
Orchard
Underplanting the old pears
15 tasks
Woodland
Shade bulbs and ferns
6 tasks
Courtyard
Container rotation
9 tasks

States

Loading and error content keep the table frame. Empty content does not overflow, so no bars draw and the region is skipped by Tab.

Empty

No plantings yet

Add bulbs to a bed to see them here.

Error

Plantings could not load

The Meadow project is offline. Try again in a moment.

Usage

import { ScrollArea } from "@tulipfarm/sprout/scroll-area";

<ScrollArea size="sm" viewportLabel="Recent activity">
  {records.map((record) => <p key={record.id}>{record.title}</p>)}
</ScrollArea>

<ScrollArea size="md" orientation="both" viewportLabel="Wide report">
  <div className="w-160">…</div>
</ScrollArea>

<ScrollArea
  variant="table"
  orientation="both"
  viewportLabel="Bulb plantings"
  data-slot="table-container"
>
  <table aria-label="Bulb plantings">…</table>
</ScrollArea>

size is "auto" (default, follows content or yourclassName), "sm" (10rem tall), or "md"(16rem tall). orientation is "vertical" (default),"horizontal", or "both". Each bar appears only while its axis overflows, and the corner fills the gap when both show.

variant="table" adds a 1px input-tone border, rounded corners, and the surface color. It caps the viewport at 60dvhand gives it role="region", named by viewportLabel. A sticky thead inside it stays pinned while rows scroll. Pass the table's own aria-label as viewportLabel. Other root props, such as data-slot, pass through to the root.

ScrollBar

import { ScrollBar } from "@tulipfarm/sprout/scroll-area";

<ScrollBar orientation="horizontal" className="my-bar" />

ScrollArea draws its bars for you. ScrollBar is the same 10px track and pill thumb, exported for custom Base UI scroll area compositions. It takes Base UI scrollbar props, and classNamemay be a state function.

Accessibility

Scrolling stays native, so wheel, trackpad, touch, and keyboard all work. When content overflows, the viewport joins the Tab order and shows a focus ring; arrow keys, Page Up, Page Down, Home, and End then scroll it. When nothing overflows it leaves the Tab order. The bars are hidden from screen readers. Thumb color changes take 120ms and stop when reduced motion is requested.

Theme tokens

Thumbs use --sprout-muted at 40%, and 60% on hover or while scrolling. The table frame uses --sprout-input and --sprout-surface. Focus uses --sprout-focus.