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

Tabs

Component

탭 패널 시스템. 4-part anatomy: Root, TabList, Tab, TabPanel.

navindicator
Related docs
bun add @reopt-ai/opt-ui
100%

기본 사용

개요 콘텐츠입니다.

비활성화 탭

첫 번째 활성화 탭

workspace variant — 편집기 탭

문서·쿼리처럼 각 탭이 독립된 작업 상태를 갖는 화면에 쓴다. status로 저장되지 않은 변경(dirty)과 실행 중(running)을 표시하고, actions는 tablist 바깥에 렌더돼 ← → 탭 순회에 끼어들지 않는다.

TabsRoot

PropTypeDefaultDescription
variant"underline" | "workspace"—탭 프레임 형태. workspace는 편집기 탭(문서/쿼리처럼 열고 닫히며 상태를 갖는 작업 단위)
defaultSelectedIdstring—초기 선택된 탭 ID
selectedIdstring | null—제어 모드: 선택된 탭 ID
setSelectedId(id: string | null) => void—제어 모드: 탭 변경 핸들러

TabList

PropTypeDefaultDescription
children*ReactNode—Tab 요소들
actionsReactNode—탭 줄 오른쪽 액션 영역 (새 탭, 닫기 등). tablist 바깥에 렌더돼 탭 순회에 끼어들지 않음
classNamestring—기본 스타일 오버라이드

Tab

PropTypeDefaultDescription
id*string—탭 고유 ID (TabPanel의 tabId와 매칭)
children*ReactNode—탭 레이블
iconReactNode—탭 이름 앞 아이콘. 활성 탭에서 accent 색으로 전환
status"dirty" | "running"—저장되지 않은 변경 / 실행 중 인디케이터
statusLabelstring—status 인디케이터의 접근성 레이블
classNamestring—기본 스타일 오버라이드

TabPanel

PropTypeDefaultDescription
tabId*string—연결된 Tab의 ID
children*ReactNode—패널 콘텐츠
classNamestring—기본 스타일 오버라이드

컴포넌트 의존 관계

깊이
▲ USED BY (8)content-tabsvertical-tabsacquisition-analysisfunnel-analysisbreakdown-analysispath-analysiscohort-comparisonmarketplace-catalogTabs
View test results

테스트 커버리지

2026년 7월 9일2/2 통과
2성공
0실패
2전체
  • 탭과 패널을 렌더링한다
  • 탭 클릭으로 패널을 전환한다

키보드 동작

키동작
← →탭 탐색
Home첫 번째 탭으로 이동
End마지막 탭으로 이동

Blocks that use this component

AcquisitionAnalysis

획득 분석 Surface. 3탭(Overview, Channels, Campaigns) + StatCard + LineChart + DataTable 조합.

Analytics

BreakdownAnalysis

분석 Surface. 4탭(Trend, Distribution, Composition, Data) + 다중 차트 + DataTable 조합.

Analytics

CohortComparison

코호트 비교 Surface. ComparisonChart + RetentionHeatmap + DataTable + N-cohort 지원 (최대 5개). 4탭 조합.

Analytics

FunnelAnalysis

퍼널 분석 Surface. StepBuilder + 3탭(Funnel, Breakdown, Trend) + FunnelChart + DataTable 조합.

Analytics

MarketplaceCatalog

카드 그리드 기반 마켓플레이스 카탈로그. 검색, 탭 필터, 정렬 지원.

Display

PathAnalysis

경로 분석 Surface. 설정 사이드바(단계 소스·시작/종료점·단계 수·행 수·제외·반복 병합·URL 그룹핑·최소 세션·세그먼트) + PathFlowChart(grid/sankey) 흐름 탭 + Top Paths/Drop-off/Patterns/Entry-Exit/Dwell 탭 조합.

Analytics

Related components

Breadcrumb

현재 위치를 표시하고 계층 탐색을 제공하는 컴포넌트.

NavIndicator

KeyPadMenu

이름보다 그림으로 알아보기 쉬운 선택지를 타일로 고르는 메뉴. 내부는 실제 radio·checkbox라 키보드와 스크린 리더가 그대로 동작한다.

Nav

Menu

메뉴바 + 개별 메뉴 시스템. 10 exports: MenubarRoot, MenubarContainer, MenuRoot, MenuTrigger, MenuButtonArrow, MenuPopover, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuSeparator.

NavOverlay

DropdownMenu

Menu Core 위의 간편 래퍼. 단일 트리거 드롭다운 메뉴에 특화되었습니다.

NavOverlay

ContentTabs

탭 콘텐츠 패널. Tabs primitive 래퍼.

NavDisplay

VerticalTabs

세로 탭 레이아웃. 좌측 탭 리스트 + 우측 패널 구성입니다.

Nav
PreviousDisclosureNextSelect