Scroll Area · grasscn

Vertical scrolling with the native track and thumb.

Preview

Example source could not be loaded: scroll-area-example. Reload this page to retry.

Usage

Give ScrollArea a bounded width and height. viewportRef addresses the scrollable div, not the root. viewportProps carries its label and onScroll handler. type="auto" and a vertical ScrollBar are the supported modes; horizontal or alternate scrollbar modes throw. disabled stops scrolling without disabling buttons inside.

Composition

Put interactive rows inside the viewport and move scrollTop through viewportRef for application navigation. ScrollBar is separately exported for vertical composition. The retained playground demonstrates Top/Middle/Bottom, row selection and the disabled-scrolling state.

Installation

Loading registry address

Component source

This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.

"use client";

import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
import * as React from "react";

import {
  isMinecraftRefCallback,
  isMinecraftRefCleanup,
  minecraftClasses as cn,
  minecraftStyle,
} from "./minecraft-render";
import type { MinecraftProps } from "./minecraft-render";

Interactive playground

VERTICAL SCROLLING

0 pxSelect a row

For the inherited interaction contract, see Base UI Scroll Area. The restrictions above describe the installed Grasscn implementation.