Skip to content
Components / Collections

Scroll area

A region that scrolls without moving the page.

@fabrials/ui
Loading state

Installation

  1. Import the control from @fabrials/ui, after setting the app up.

    TypeScript
    import { ScrollArea } from "@fabrials/ui";
  2. Or install it under shadcn's name, so code that imports @/components/ui/scroll-area gets this control. See shims.

    npx shadcn@latest add @fabrials/scroll-area

API reference

Prop / exportTypeDescription
childrenReactNodeThe content taller than the region.

Behavior

The region has an accessible name when it is the only way to reach the content.

Accessibility

Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.