ScrollArea

ScrollArea provides native scrolling inside a bounded layout. Select the scroll direction with orientation and give the parent a constrained track using Grid props. The scroll container can shrink in both grid and flex layouts so long content scrolls inside the available space.

#Default usage

<Grid templateRows="160px">
  <ScrollArea aria-label="Release notes" role="region" tabIndex={0}>
    <VStack align="stretch" gap={16}>
      <Badge>Latest updates</Badge>
      <Text>Button states refined.</Text>
      <Text>Input hover polished.</Text>
      <Text>Docs navigation tightened.</Text>
      <Text>Dark mode contrast reviewed.</Text>
      <Text>Component previews optimized.</Text>
      <Text>Keyboard interactions verified.</Text>
    </VStack>
  </ScrollArea>
</Grid>

#Import

import { Badge, Grid, ScrollArea, Text, VStack } from "@froggdesign/enter-ui-react";

#Layout and overflow

The default orientation="vertical" scrolls vertically and clips horizontal overflow. Use horizontal for intentionally wide static content, or both when users need to scroll in either direction. Without a bounded parent, ScrollArea grows naturally with its content.

Scrolling is local to ScrollArea; wrapping a whole preview can clip controls whose floating panels render in place. Keep those controls outside the scroll region, or use controls that render their overlay through a portal.

#Accessibility

ScrollArea is a native div with overflow. Add tabIndex={0} when keyboard users need to focus the region directly, and pair it with role="region" and an accessible name. Native arrow, Page Up, and Page Down scrolling remain available while the region has focus. Touch scrolling and trackpad scrolling use browser behavior.

#API

• orientation: "vertical" (default), "horizontal", or "both".
• Accepts native div props, including aria-label, role, and tabIndex.
• Use parent layout props, such as Grid templateRows, to set the available height without a consumer style override.

#Styling

EnterUI owns .eui-scroll-area sizing behavior and theme-aware native scrollbar styling. The component preserves a zero minimum width and height so its content does not enlarge a constrained parent track.