Data & feedback@neumorphism-ui/scroll-area

Scroll Area

Uses overflow-auto and the native scrollbar to preserve wheel, touch, keyboard, and browser accessibility behavior. The ScrollBar export is a hidden placeholder for shadcn composition compatibility.

@neumorphism-ui/scroll-area

Registry JSON

Preview

NVDAAccessibilityReady

DialogOverlayReady

Data tableDataReview

SliderInputReady

TooltipOverlayReady

CalendarCompositePlanned

CommandCompositePlanned

Installation

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

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

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

Example

<ScrollArea
  className="h-64 p-4"
  tabIndex={0}
  aria-label="Recent activity"
>
  {activities.map((activity) => (
    <article key={activity.id}>{activity.title}</article>
  ))}
  <ScrollBar orientation="vertical" />
</ScrollArea>

API Reference

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.
`ScrollBar`	`orientation`	`"horizontal" \| "vertical"`	`"vertical"`	A direction data attribute for the compatibility placeholder.