reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
Tabs
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.

Tabs

Component

Organize tab panels with Root, TabList, Tab, and TabPanel components.

navindicator
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { TabsRoot, TabList, Tab, TabPanel } from "@reopt-ai/opt-ui";

Live preview

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

100%

기본 사용

개요 콘텐츠입니다.

비활성화 탭

첫 번째 활성화 탭

workspace variant — 편집기 탭

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

Usage guidance

Anatomy

  • Place TabList and TabPanel inside TabsRoot, and match each Tab.id to TabPanel.tabId.

Best practices

  • Give TabList an accessible name. In controlled mode, connect selectedId and onSelectedIdChange together.

Usage to avoid

  • Use navigation links for primary navigation to other URLs, rather than tab panels.

Usage examples

Two named panels

TabsRoot

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

TabList

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

Tab

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

TabPanel

PropTypeDefaultDescription
tabIdRequiredstring—연결된 Tab의 ID
childrenRequiredReactNode—패널 콘텐츠
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

opt-ui

AcquisitionAnalysis

Blocks

Analyze acquisition across Overview, Channels, and Campaigns tabs with metrics, trends, and tables.

opt-ui

BreakdownAnalysis

Blocks

Explore Trend, Distribution, Composition, and Data tabs with multiple charts and a DataTable.

opt-ui

CohortComparison

Blocks

Compare up to five cohorts across four tabs with comparison charts, retention heatmaps, and tables.

opt-ui

FunnelAnalysis

Blocks

Define funnel steps and compare conversion, breakdowns, and trends with charts and tables.

opt-ui

MarketplaceCatalog

Blocks

Browse a marketplace card grid with search, tab filters, and sorting.

opt-ui

PathAnalysis

Blocks

Configure user-path analysis and explore grid or Sankey flows, top paths, drop-off, patterns, entry and exit points, and dwell time.

Related components

opt-ui

Breadcrumb

Core

Show the current location and provide navigation through its hierarchy.

opt-ui

KeyPadMenu

Core

Choose visual options from tiles backed by native radio buttons and checkboxes for keyboard and screen reader access.

opt-ui

Menu

Core

Compose menu bars and individual menus with checkbox items, radio items, separators, and popovers.

opt-ui

DropdownMenu

Core

Create a single-trigger dropdown with a convenient wrapper around Menu Core.

opt-ui

ContentTabs

Shells

Switch between content panels with a wrapper around the Tabs primitive.

opt-ui

VerticalTabs

Shells

Arrange a vertical tab list beside its content panels.

PreviousDisclosureNextSelect