ScrollArea

Use ScrollArea

ScrollArea is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, ScrollArea, Stack, Text } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <ScrollArea aria-label="Recent activity" style={{ maxHeight: "12rem" }}>
        <Stack gap="4">
          <Text>Project created.</Text>
          <Text>Workspace updated.</Text>
        </Stack>
      </ScrollArea>
    </FloodRoot>
  );
}

Design notes

• Scrollbars overlay the viewport with an inset; they do not reserve a content gutter. Give the viewport an explicit height or maxHeight to produce vertical overflow.
• The forwarded ref, className, style and native div props belong to the scrollable viewport. Supply a visible context or accessible label for keyboard users.
• Wheel, touch and keyboard scrolling remain native. Default contentInset="scrollbar" keeps text and full-width rows clear of rails with inner padding, without shrinking the viewport. Explicit none allows edge-to-edge content when the host already provides safe padding. Rails automatically avoid rounded clipping corners.
• Forced colors restores native scrollbars as an accessibility fallback. Verify horizontal and RTL content, resizing and zoom in the host composition.

API reference