Scroll Area

Use ScrollArea when a bounded content region should scroll independently of the page.

Preview

Scrollable component status list

Scroll a bounded list of component names, categories, and illustrative readiness badges.

NVDAAccessibilityReady

DialogOverlayReady

Data tableDataReview

SliderInputReady

TooltipOverlayReady

CalendarCompositePlanned

CommandCompositePlanned

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/scroll-area

Install the shared base once, then add components and their dependencies with the CLI.

Scrollable component status list

npx shadcn@latest add @neumorphism-ui/badge @neumorphism-ui/scroll-area

Registry JSON

Usage

Constrain the region's height or width and render its content normally. Add a name and a keyboard entry point when the region needs independent navigation.

"use client";

import { ScrollArea } from "@/components/ui/scroll-area";

export default function Example() {
  return (
    <ScrollArea className="h-40" tabIndex={0} aria-label="Recent activity">
      <ul className="grid gap-3 p-4">
        {Array.from({ length: 12 }, (_, index) => <li key={index}>Activity {index + 1}</li>)}
      </ul>
    </ScrollArea>
  );
}

API Reference

Uses overflow-auto and the native scrollbar to preserve wheel, touch, keyboard, and browser accessibility behavior.

Component	Prop	Type	Default	Description
`ScrollArea`	`className`	`string`	`—`	Constrains height or width to create an overflow region.
`ScrollArea`	`tabIndex`	`number`	`—`	Provides a keyboard scrolling entry point when no focusable child is present.
`ScrollArea`	`aria-label / aria-labelledby`	`string`	`—`	Names the content when it is an independently navigable region.