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

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 소개
  • 문의
  • 서비스 약관
  • 개인정보처리방침

주식회사 리옵트사업자등록번호 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/Core/VirtualList

VirtualList

컴포넌트

가상 스크롤 리스트. 대량 데이터를 윈도잉 기법으로 효율적으로 렌더링합니다.

indicator
관련 문서
bun add @reopt-ai/opt-ui
100%

1,000개 항목 가상 스크롤

Item 1

VirtualList

Prop타입기본값설명
items*T[]—렌더링할 항목 배열
renderItem*(item: T, index: number) => ReactNode—항목 렌더 함수
itemHeight*number—각 항목의 고정 높이(px)
overscannumber3뷰포트 밖에 미리 렌더링할 항목 수
테스트 결과 자세히 보기

테스트 커버리지

2026년 7월 9일4/4 통과
4성공
0실패
4전체
  • 항목을 렌더링한다
  • role=list를 가진다
  • 렌더된 윈도우 항목에 listitem 역할을 부여한다
  • 컨테이너 리사이즈 시 visible range를 다시 계산한다

관련 컴포넌트

Kbd

키보드 단축키를 시각적으로 표시하는 인라인 뱃지 컴포넌트.

인디케이터

StatCard

단일 지표를 값·변화량·보조 설명으로 표시하는 통계 카드. 비교 기준이 없으면 변화량 줄을 렌더하지 않는다.

인디케이터

CompositeZone

Composite 기반 2D 키보드 탐색 컨테이너. 화살표 키로 자식 요소 간 이동 가능.

인디케이터

Toolbar

툴바 컨테이너 + 툴팁. 7 exports: ToolbarRoot, ToolbarContainer, ToolbarButton, ToolbarSeparator, TooltipProvider, TooltipAnchor, Tooltip.

인디케이터

Badge

인라인 상태 뱃지. 5가지 색상 변형, 상태 점(dot) 옵션 지원.

인디케이터

Spinner

로딩 상태 표시 스피너. 3가지 크기와 장식용 aria-hidden 모드를 지원합니다.

인디케이터
이전Pagination다음LoadingOverlay

기본 사용

Command Palette를 열려면Ctrl+K를 누르세요

단일 키

EscEnterTabSpace

조합 키

Ctrl+Shift+P
⌘+K

연속 키 (순차 입력)

G HG GZ Z

의미와 선택 상태를 가진 지표

Selected metric: revenue

로딩과 밀도

Query latency184ms↓ -12ms

기본 사용 (2D 그리드)

A1
A2
A3
B1
B2
B3

포커스 순환 비활성화

1
2
3

기본 사용


포커스 순환

Variants

DefaultInfoSuccessWarningError

With Dot

DefaultInfoSuccessWarningError

Sizes

SmallMedium

Sizes

Small (16px)

Medium (24px)

Large (32px)

Colors