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

Breadcrumb

Component

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

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

기본 사용

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

커스텀 구분자

  1. ›
  2. ›
  3. 상세

아이콘 포함

  1. /
  2. /
  3. 프로필

Breadcrumb

PropTypeDefaultDescription
items*BreadcrumbItem[]—경로 항목 배열. { id, label, href?, icon? }
separatorReactNode"/"항목 간 구분자
onNavigate(item: BreadcrumbItem) => void—항목 클릭 핸들러

컴포넌트 의존 관계

깊이
▲ USED BY (1)item-detailBreadcrumb
View test results

테스트 커버리지

2026년 7월 9일6/6 통과
6성공
0실패
6전체
  • navigation role을 렌더링한다
  • 모든 항목을 렌더링한다
  • 마지막 항목에 aria-current를 설정한다
  • 기본 구분자를 표시한다
  • 커스텀 구분자를 지원한다
  • onNavigate 콜백을 호출한다

Blocks that use this component

ItemDetail

상품/아이템 상세 페이지. 태그, 저자, 콘텐츠, 리뷰 섹션 포함.

Display

Related components

Tabs

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

NavIndicator

KeyPadMenu

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

Nav

Menu

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

NavOverlay

DropdownMenu

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

NavOverlay

Kbd

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

Indicator

StatCard

단일 지표를 값·변화량·보조 설명으로 표시하는 통계 카드. 비교 기준이 없으면 변화량 줄을 렌더하지 않는다.

Indicator
PreviousMeterNextEmptyState
  1. 에이전트 목록/
  2. 코드 리뷰 에이전트
🤖

코드 리뷰 에이전트

PR 코드를 자동 분석하고 리뷰 코멘트를 생성합니다.

Free
코드리뷰자동화v1.2.0
AAlice
1234 다운로드4.8 평점
text
1You are a code review agent. Analyze the PR diff and provide constructive feedback.

리뷰(2)

AAlice
2026-03-10

정말 유용합니다! 코드 리뷰 시간이 절반으로 줄었어요.

BBob
2026-03-08

대체로 좋지만 가끔 오탐이 있습니다.

기본 사용

개요 콘텐츠입니다.

비활성화 탭

첫 번째 활성화 탭

workspace variant — 편집기 탭

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

시각화 타입 (단일 선택)

시각화 타입

레이어 (다중 선택)

겹칠 레이어

기본 사용

단일 메뉴

기본 사용

아이콘 + 섹션

정렬 옵션

기본 사용

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

단일 키

EscEnterTabSpace

조합 키

Ctrl+Shift+P
⌘+K

연속 키 (순차 입력)

G HG GZ Z

의미와 선택 상태를 가진 지표

Selected metric: revenue

로딩과 밀도

Query latency184ms↓ -12ms