Components / ScrollArea
v0.3.1 StableFoundation ComponentReact 18 & 19Zero Runtime CSS

ScrollArea

Native scrolling with a named keyboard focus target.

Interactive preview

  1. Project update 1
    A small improvement to your workspace.
  2. Project update 2
    A small improvement to your workspace.
  3. Project update 3
    A small improvement to your workspace.
  4. Project update 4
    A small improvement to your workspace.
  5. Project update 5
    A small improvement to your workspace.
  6. Project update 6
    A small improvement to your workspace.
  7. Project update 7
    A small improvement to your workspace.
  8. Project update 8
    A small improvement to your workspace.
  9. Project update 9
    A small improvement to your workspace.
  10. Project update 10
    A small improvement to your workspace.
  11. Project update 11
    A small improvement to your workspace.
  12. Project update 12
    A small improvement to your workspace.

Usage

import { ScrollArea } from "@devvy-ui/react";

<ScrollArea label="Activity history" style={{maxHeight:240}}>{history}</ScrollArea>

API reference

Native HTML attributes, className, style and a forwarded ref are supported. Component-specific props:

PropTypeDefaultDescription
axisvertical / horizontal / bothverticalOverflow axes.
labelstringrequiredScrollable region name.
native div propsHTMLAttributes—Children, style, ref and focus customization.

Accessibility & behavior

Platform Behavior & Guidelines

Native scrollbars and touch/keyboard scrolling are preserved. No wheel interception or simulated scrolling. Keep an appropriate height or width constraint.

Source ownership

Run npx @devvy-ui/cli init once in your React project, then add the source:

npx @devvy-ui/cli add scroll-area

Make the source yours.

Start from the canonical implementation used by the package and registry. Change the code, keep the MIT notice, and build the behavior your project needs.

ScrollArea.tsxREACT / TSX

Edit your own copy. Downloaded source uses your changes; the component preview above uses the shipped version. Run the source installer first to include shared helpers.