reopt designreopt design
DocsExploreToolsPricingBuilder
Login
Explore/
opt-ui165opt-charts33opt-datagrid6opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
Overview165Core59Shells75Blocks31
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • 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 바깥에 렌더돼 ← → 탭 순회에 끼어들지 않는다.

컴포넌트 의존 관계

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

테스트 커버리지

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

키보드 동작

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

Related components

Breadcrumb

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

NavIndicator

Menu

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

NavOverlay

DropdownMenu

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

NavOverlay

ContentTabs

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

NavDisplay

VerticalTabs

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

Nav

Kbd

키보드 단축키를 시각적으로 표시하는 인라인 뱃지 컴포넌트.

Indicator
PreviousDisclosureNextSelect

기본 사용

  1. 홈/
  2. 문서/
  3. Core/
  4. Breadcrumb

커스텀 구분자

  1. ›
  2. ›
  3. 상세

아이콘 포함

  1. /
  2. /
  3. 프로필

기본 사용

단일 메뉴

기본 사용

아이콘 + 섹션

정렬 옵션

기본 사용

프로젝트 개요 콘텐츠입니다.

기본 선택 탭 설정

설정 탭이 기본 선택됩니다.

Profile settings content

기본 사용

Command Palette를 열려면Ctrl+K를 누르세요

단일 키

EscEnterTabSpace

조합 키

Ctrl+Shift+P
⌘+K

연속 키 (순차 입력)

G HG GZ Z