reopt designreopt design
DocsExploreToolsPricingBuilder
Login
Explore/
opt-ui205opt-charts40opt-datagrid9opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
Overview205Core74Shells99Blocks32
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/Core/ScrollArea

ScrollArea

Component

커스텀 스크롤바를 제공하는 스크롤 컨테이너. 수직/수평/양방향 지원.

layout
Related docs
bun add @reopt-ai/opt-ui
100%

기본 사용

수직 스크롤

항목 1

항목 2

항목 3

항목 4

항목 5

항목 6

항목 7

항목 8

항목 9

항목 10

항목 11

항목 12

항목 13

항목 14

항목 15

항목 16

항목 17

항목 18

항목 19

항목 20

수평 스크롤

1
2
3
4
5
6
7
8
9
10

ScrollArea

PropTypeDefaultDescription
children*ReactNode—스크롤할 콘텐츠
orientation"vertical" | "horizontal" | "both""vertical"스크롤 방향
classNamestring—커스텀 CSS 클래스

컴포넌트 의존 관계

깊이
▲ USED BY (4)kanban-boardnotification-centerchat-sidebarchat-message-listScrollArea
View test results

테스트 커버리지

2026년 7월 9일3/3 통과
3성공
0실패
3전체
  • children을 렌더링한다
  • 수직 orientation이 기본이다
  • 수평 orientation을 지원한다

Related components

Card

범용 카드 컨테이너. Header, Title, Description, Content, Footer 하위 컴포넌트 포함.

Layout

PageHeader

페이지 제목, 설명, 액션 슬롯을 제공하는 레이아웃 헤더 컴포넌트.

Layout

Container

최대 너비 제약과 중앙 정렬을 제공하는 래퍼. 페이지 콘텐츠 폭 제한용.

Layout

Section

시맨틱 스페이싱 블록. 제목이 있으면 aria-labelledby를 자동 설정합니다.

Layout

Resizable

react-resizable-panels 래퍼. 드래그로 크기를 조절할 수 있는 패널 분할 레이아웃.

Layout

FieldToken

필드 타입을 일관된 글리프와 선택적 텍스트 레이블로 표현합니다. 문자열·숫자·날짜·IP·지오 등 분석 스키마 타입마다 같은 아이콘과 팔레트 슬롯을 씁니다.

PreviousPageHeaderNextContainer

기본 사용

카드 제목

카드에 대한 설명입니다.

카드 본문 콘텐츠가 여기에 들어갑니다.

변형

Default
Outline
Ghost

패딩 크기

Small
Medium
Large

기본 사용

프로젝트 설정

프로젝트의 기본 정보와 환경을 관리합니다.

대시보드

사용자 목록

등록된 사용자를 검색하고 관리합니다.

기본 사용

maxWidth="sm"

maxWidth="md"

maxWidth="lg"

maxWidth="xl"

기본 사용

기본 정보

프로젝트의 기본 설정을 관리합니다.

폼 필드 영역

고급 설정

고급 설정 영역
추가 옵션 영역

제목 없는 섹션 (aria-labelledby 미설정)

기본 사용

수평 분할

패널 A
패널 B

수직 분할

상단
하단

스키마 컬럼 목록

  • event_nameVARCHAR
  • user_iduuid
  • occurred_atTIMESTAMP WITH TIME ZONE
  • revenueDECIMAL(12,2)
  • is_internalboolean
  • propertiesJSONB
  • referrerurl
  • client_ipinet
  • tagstext[]

전체 타입

StringNumberBooleanDateDate and timeDurationPercentCurrencyEnumArrayObjectJSONIP addressGeo pointURLEmailIdentifierBinaryAggregateNestedUnknown

크기와 채우기

결제 금액