Avatar
설치 확인사람 표시, 아바타 묶음
1. 목적과 출처
사람 표시, 아바타 묶음
- 출처
- shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
- 프로젝트
src/components/ui/avatar.tsx- Registry
@adcapsule/avatar
2. 프리뷰와 변형
오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.
| size | 글자 | 상태 점 | 묶음 |
|---|---|---|---|
| 작게 sm | 민 | 준 | 민준지 +2 |
| 기본 default | 민 | 준 | 민준지 +2 |
| 크게 lg | 민 | 준 | 민준지 +2 |
3. 속성 바꿔 보기
민
size
4. 설치와 사용
- npm 패키지
- @base-ui/react
- 함께 설치
- @adcapsule/utils
처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결
5. 바꿔도 되는 것과 유지할 토큰
제품에서 바꿔도 되는 것
- size: sm·default·lg
- 이미지를 못 불러오면 AvatarFallback 표시
- AvatarGroup·AvatarGroupCount로 묶음
- AvatarBadge로 상태 점
공통으로 유지할 토큰
- surface.raised (대체 글자 배경, --muted)
- text.secondary (대체 글자)
- border.default (테두리)
- accent.solid (상태 점)