reopt designreopt design
DocsExploreToolsPricingBuilder
Explore/
opt-ui161opt-charts21opt-datagrid5opt-editor5opt-chat6opt-shell14brandapp-ui8Examples12
Overview161Core55Blocks75Pages31
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 서비스 약관
  • 개인정보처리방침

© 2026 reopt-ai. All rights reserved.

Explore/Core/Tabs

Tabs

컴포넌트

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

navindicator
관련 문서
bun add @reopt-ai/opt-ui
100%

기본 사용

개요 콘텐츠입니다.

비활성화 탭

첫 번째 활성화 탭

관련 컴포넌트

Breadcrumb

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

네비게이션인디케이터

Menu

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

네비게이션오버레이

DropdownMenu

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

네비게이션오버레이

ContentTabs

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

네비게이션표시

VerticalTabs

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

네비게이션

Kbd

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

인디케이터
이전Disclosure다음Select

기본 사용

  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