데이터와 피드백@neumorphism-ui/scroll-area

Scroll Area

overflow-auto와 native scrollbar를 사용해 휠, 터치, 키보드, 브라우저 접근성을 그대로 유지합니다. ScrollBar export는 shadcn 조합 호환을 위한 숨겨진 placeholder입니다.

@neumorphism-ui/scroll-area

Registry JSON

미리보기

NVDA접근성준비됨

Dialog오버레이준비됨

Data table데이터검토

Slider입력준비됨

Tooltip오버레이준비됨

Calendar복합예정

Command복합예정

설치

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

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

Import

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

Example

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

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`ScrollArea`	`className`	`string`	`—`	높이 또는 너비를 제한해 overflow 영역을 만듭니다.
`ScrollArea`	`tabIndex`	`number`	`—`	내부에 focusable 요소가 없을 때 키보드 스크롤 진입점을 제공합니다.
`ScrollArea`	`aria-label / aria-labelledby`	`string`	`—`	독립적으로 탐색할 영역이면 콘텐츠 이름을 제공합니다.
`ScrollBar`	`orientation`	`"horizontal" \| "vertical"`	`"vertical"`	호환용 placeholder의 방향 데이터 속성입니다.