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/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

Avatar

PropTypeDefaultDescription
srcstring—이미지 URL
altstring—이미지 대체 텍스트
namestring—사용자 이름 (이니셜 생성 및 색상 결정)
size"xs" | "sm" | "md" | "lg" | "xl""md"아바타 크기
fallbackReactNode—이미지 실패 시 표시할 콘텐츠
status"online" | "offline" | "busy" | "away"—상태 인디케이터

AvatarGroup

PropTypeDefaultDescription
maxnumber4최대 표시 개수
size"xs" | "sm" | "md" | "lg" | "xl""md"아바타 크기
children*ReactNode—Avatar 요소들

컴포넌트 의존 관계

깊이
▲ USED BY (7)task-listactivity-feedteam-member-listaudit-logchat-message-listuser-detailitem-detailAvatar
View test results

테스트 커버리지

2026년 7월 9일8/8 통과
8성공
0실패
8전체
  • 로드된 이미지를 렌더링한다
  • 로드 전에는 이미지 대신 폴백(이니셜)을 보여준다
  • srcSet으로 로드된 이미지를 렌더링한다
  • 이름에서 이니셜을 생성한다
  • 영문 이름에서 이니셜을 생성한다
  • status 인디케이터를 표시한다
  • status를 루트 이미지 이름에 포함하고 상태 점은 장식으로 숨긴다
  • size에 따른 크기를 적용한다

Blocks that use this component

ItemDetail

상품/아이템 상세 페이지. 태그, 저자, 콘텐츠, 리뷰 섹션 포함.

Display

UserDetail

사용자 상세 프로필 Surface. Avatar + StatCard + GaugeChart + Progress + DataTable + FilterBar 조합.

Display

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가지 크기와 장식용 aria-hidden 모드를 지원합니다.

Indicator
PreviousTextareaNextProgress
  1. 에이전트 목록/
  2. 코드 리뷰 에이전트
🤖

코드 리뷰 에이전트

PR 코드를 자동 분석하고 리뷰 코멘트를 생성합니다.

Free
코드리뷰자동화v1.2.0
AAlice
1234 다운로드4.8 평점
text
1You are a code review agent. Analyze the PR diff and provide constructive feedback.

리뷰(2)

AAlice
2026-03-10

정말 유용합니다! 코드 리뷰 시간이 절반으로 줄었어요.

BBob
2026-03-08

대체로 좋지만 가끔 오탐이 있습니다.