reopt designreopt design
DocsExploreToolsPricingBuilder
Explore/
opt-ui161opt-charts21opt-datagrid5opt-editor5opt-chat6opt-shell14brandapp-ui8Examples12
Overview161Core55Blocks75Pages31
reopt designreopt design

A design system for the AI era

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

© 2026 reopt-ai. All rights reserved.

Explore/Core/Avatar

Avatar

Component

사용자 아바타. 이미지, 이니셜 자동 생성, 상태 인디케이터, 그룹 지원.

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

Sizes

XSMLX

Status Indicators

김

online

이

busy

박

away

최

offline

Initials Generation

홍

홍길동

JD

John Doe

A

Alice

No name

Fallback

FU

이미지가 없을 때 커스텀 fallback 표시

이미지 로딩 & 폴백 상태머신

정이

로드 성공 → 이미지

홍

로드 실패 → 이니셜 폴백

이미지는 오프스크린에서 먼저 디코딩되며, 로드 전·실패 시 폴백을 보여줘 broken-image 깜빡임이 없습니다.

반응형 이미지 (srcSet / sizes)

R

DPR에 따라 1x/2x 후보 중 선택됩니다.

Avatar Group

max=4

김이박최+1

max=2

김이+3

Related components

Kbd

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

Indicator

StatCard

트렌드 방향과 변화량을 표시하는 통계 카드.

Indicator

CompositeZone

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

Indicator

Toolbar

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

Indicator

Badge

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

Indicator

Spinner

로딩 상태 표시 스피너. 3가지 크기 지원.

Indicator
PreviousTextareaNextProgress

기본 사용

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

단일 키

EscEnterTabSpace

조합 키

Ctrl+Shift+P
⌘+K

연속 키 (순차 입력)

G HG GZ Z

기본 사용

총 매출₩12,450,000↑ +12.5%

트렌드 변형

방문자3,420↑ +8.2%
이탈률32.1%↓ -4.3%
전환율2.4%→ 0.0%

기본 사용 (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