Scroll Area

페이지와 별개로 일정한 크기의 콘텐츠 영역만 스크롤해야 할 때 사용합니다.

미리보기

스크롤하는 컴포넌트 상태 목록

크기가 제한된 영역에서 컴포넌트 이름, 분류, 예시 준비 상태 배지를 스크롤해 확인합니다.

NVDA접근성준비됨

Dialog오버레이준비됨

Data table데이터검토

Slider입력준비됨

Tooltip오버레이준비됨

Calendar복합예정

Command복합예정

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

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

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

스크롤하는 컴포넌트 상태 목록

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

Registry JSON

사용법

영역의 높이나 너비를 제한하고 내부 콘텐츠를 그대로 렌더링하세요. 독립적으로 탐색할 영역이라면 이름과 키보드 포커스 진입점을 제공합니다.

"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 레퍼런스

overflow-auto와 native scrollbar를 사용해 휠, 터치, 키보드, 브라우저 접근성을 그대로 유지합니다.

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