ItemDetail
BlocksPresent an item or product with tags, author information, content, and reviews.
Represent users with images, generated initials, accessible status indicators, and avatar groups.
bun add @reopt-ai/opt-uiimport { Avatar, AvatarGroup } from "@reopt-ai/opt-ui";Change the width and theme, then interact with the components.
online
busy
away
offline
홍길동
John Doe
Alice
No name
이미지가 없을 때 커스텀 fallback 표시
로드 성공 → 이미지
로드 실패 → 이니셜 폴백
이미지는 오프스크린에서 먼저 디코딩되며, 로드 전·실패 시 폴백을 보여줘 broken-image 깜빡임이 없습니다.
DPR에 따라 1x/2x 후보 중 선택됩니다.
max=4
max=2
Present an item or product with tags, author information, content, and reviews.
Build user profiles with avatars, metrics, gauges, progress indicators, tables, and filters.
Display keyboard shortcuts as inline key badges.
Show a metric with its value, change, and supporting description. Omit the change row when no comparison is available.
Navigate child elements in two dimensions with arrow keys using a Composite container.
Group actions in a toolbar with buttons, separators, and tooltips.
Display inline status badges with five color variants and an optional status dot.
Indicate loading in three sizes, with an aria-hidden mode for decorative use.