reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
TeamMemberList
reopt designreopt design

A design system for the AI era

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

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

© 2026 reopt Inc. All rights reserved.

TeamMemberList

Shell

Show team members and online status in list, compact, or avatar-only layouts.

display
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { TeamMemberList } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

리스트 레이아웃 (기본)

팀원

2/5 온라인

컴팩트 레이아웃

팀원

아바타만 표시

팀원

김이박최정

최대 표시 제한

팀원

2/5 온라인

TeamMemberList

PropTypeDefaultDescription
membersRequiredTeamMemberDef[]—팀원 배열. { id, name, email, avatar?, role?, status? }
titlestring"팀원"섹션 제목
layout"list" | "compact" | "avatars-only""list"레이아웃 모드
maxDisplaynumber—최대 표시 인원
onMemberClick(member: TeamMemberDef) => void—팀원 클릭 핸들러

컴포넌트 의존 관계

깊이
▲ USED BY (1)▼ USES (1)task-dashboardTeamMemberListavatar
View test results

테스트 커버리지

2026년 7월 9일13/13 통과
13성공
0실패
13전체
  • list role을 렌더링한다
  • 타이틀을 렌더링한다
  • 온라인 인원 수를 표시한다
  • 모든 멤버를 렌더링한다
  • 역할을 표시한다
  • 이메일을 표시한다
  • 상태 레이블을 표시한다
  • maxDisplay로 표시 개수를 제한한다
  • compact 레이아웃을 렌더링한다
  • compact 레이아웃에서 maxDisplay를 적용한다
  • avatars-only 레이아웃을 렌더링한다
  • onMemberClick 콜백을 호출한다
  • 빈 상태 메시지를 표시한다

키보드 동작

키동작
↑ ↓팀원 간 이동
Enter팀원 선택

Blocks that use this component

opt-ui

TaskDashboard

Blocks

Manage tasks with activity, team members, quick actions, and filters.

Related components

opt-ui

FaqAccordion

Shells

Organize FAQ questions and answers with Composite and Disclosure components.

opt-ui

EnvPanel

Shells

Browse environment variables with collapsible environment groups and Composite navigation.

opt-ui

BranchSelect

Shells

Choose a Git branch with a wrapper around the Select primitive.

opt-ui

DesignGuidePanel

Shells

Consult six design-system reference sections covering primitives, keyboard patterns, Tailwind selectors, and accessibility attributes.

opt-ui

QuickActions

Shells

Present frequent actions in a grid or list with keyboard shortcut labels.

opt-ui

EventIcon

Shells

Display an event icon from a semantic key or React node with a background color.

PreviousQuickActionsNextAuthForm