콘텐츠로 건너뛰기
1.6k

스크롤 영역

채팅 창, 사이드바, 파일 트리를 위한 사용자 정의 크로스 브라우저 스크롤바가 적용된 스크롤 가능한 컨테이너로, 두툼한 네오브루탈리즘 스타일의 스크롤 손잡이가 특징입니다.

import * as React from "react"

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

Scroll Area는 브라우저 기본 스크롤바를 스타일할 수 있는 것으로 바꿉니다. 아래에는 네이티브 스크롤이 그대로라 휠, 터치, 모멘텀 동작은 손대지 않습니다. Base UI Scroll Area 컴포넌트를 기반으로 하며, 테두리색의 두툼한 thumb과 뷰포트의 선명한 포커스 링으로 네오브루탈리즘 공식을 입혔습니다.

다음과 같은 경우에 사용합니다.

  • 채팅·로그 창 — 높이를 고정하고 메시지 스크롤은 패널 안에서, 페이지가 아니라.
  • 사이드바·파일 트리 — 메인 콘텐츠와 독립적으로 스크롤되는 긴 탐색 목록.
  • 가로 스트립 — orientation="horizontal"로 태그 행, 카드 갤러리, 넓은 테이블.

설치

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/scroll-area.json
npx shadcn@latest add https://neobrutalism.com/r/base/scroll-area.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/scroll-area.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/scroll-area.json

다음 의존성을 설치합니다.

pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

다음 코드를 복사해서 프로젝트에 붙여넣습니다.

components/ui/scroll-area.tsx
"use client"

import * as React from "react"
import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function ScrollArea({
  className,
  children,
  ...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
  return (
    <ScrollAreaPrimitive.Root
      data-slot="scroll-area"
      className={cn("relative", className)}
      {...props}
    >
      <ScrollAreaPrimitive.Viewport
        data-slot="scroll-area-viewport"
        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
      >
        {children}
      </ScrollAreaPrimitive.Viewport>
      <ScrollBar />
      <ScrollAreaPrimitive.Corner />
    </ScrollAreaPrimitive.Root>
  )
}

function ScrollBar({
  className,
  orientation = "vertical",
  ...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
  return (
    <ScrollAreaPrimitive.ScrollAreaScrollbar
      data-slot="scroll-area-scrollbar"
      data-orientation={orientation}
      orientation={orientation}
      className={cn(
        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
        className
      )}
      {...props}
    >
      <ScrollAreaPrimitive.ScrollAreaThumb
        data-slot="scroll-area-thumb"
        className="relative flex-1 rounded bg-border"
      />
    </ScrollAreaPrimitive.ScrollAreaScrollbar>
  )
}

export { ScrollArea, ScrollBar }

import 경로를 프로젝트 구성에 맞게 수정합니다.

사용법

import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
  Your scrollable content here.
</ScrollArea>

구성

ScrollArea를 만들려면 다음 구성을 사용합니다.

ScrollArea
└── ScrollBar

예제

수평

수평 방향의 스크롤에는 ScrollBar에 orientation="horizontal"을 지정합니다.

import * as React from "react"
import Image from "next/image"

RTL

Neobrutalism에서 RTL 지원을 활성화하는 방법은 RTL 설정 가이드를 참고하세요.

"use client"

import * as React from "react"

접근성

스크롤 영역용 WAI-ARIA 패턴은 없고 필요도 없습니다. Base UI 컴포넌트가 아래에 실제 네이티브 스크롤 컨테이너를 유지하므로 휠, 터치, 키보드 스크롤이 브라우저 자체와 같습니다. 모든 브라우저가 스크롤 컨테이너에 키보드 포커스를 주지 않습니다. 콘텐츠에 포커스 가능 요소가 없으면 뷰포트에 tabIndex={0}과 aria-label을 두어 키보드 사용자가 도달하고 스크롤할 수 있게 하세요. 그 경우를 위한 보이는 포커스 링은 스타일에 이미 포함되어 있습니다. 커스텀 스크롤바와 thumb은 포인터 전용 어포던스이며, 유일한 스크롤 수단이 되어서는 안 됩니다.

API 참조

자세한 내용은 Base UI 문서를 참고하세요.