Tabs
설치 확인같은 화면 안의 보기 전환. 수평·수직
1. 목적과 출처
같은 화면 안의 보기 전환. 수평·수직
- 출처
- shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
- 프로젝트
src/components/ui/tabs.tsx- Registry
@adcapsule/tabs
2. 프리뷰와 변형
오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.
| variant | horizontal | vertical |
|---|---|---|
| 상자 default | 이슈 11개 | 이슈 11개 |
| 밑줄 line | 이슈 11개 | 이슈 11개 |
3. 속성 바꿔 보기
이슈 11개
variant
orientation
4. 설치와 사용
- npm 패키지
- @base-ui/react, class-variance-authority
- 함께 설치
- @adcapsule/utils
처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결
5. 바꿔도 되는 것과 유지할 토큰
제품에서 바꿔도 되는 것
- TabsList variant: default·line
- orientation: horizontal·vertical
- 탭별 disabled
- value·onValueChange로 제어
공통으로 유지할 토큰
- surface.raised (상자 배경, --muted)
- surface.canvas (고른 탭, --background)
- text.primary / text.secondary
- control.height.md (수평 목록 높이)
- radius.md (목록 틀 6px)
- radius.sm (탭 항목 4px)