즉시 사용 가능한
컴포넌트와 모듈을
살펴보세요.

시간축 기반 시계열 차트. 조회 구간에 고정된 시간 스케일, 자동 틱/라벨, 미완료 버킷 표시, 드래그 구간 선택(줌), 주석·임계선, 비교 기간 오버레이를 지원합니다.

범용 매트릭스 히트맵. 행×열 값 강도를 색으로 표현하며, 표의 머리글과 숨긴 값도 스크린 리더에 제공합니다.

단계별 진입 인원, 전체 전환율, 단계 사이 이탈을 함께 보여주는 퍼널 차트.

비율/구성 데이터용 파이 차트. innerRadius를 설정하면 도넛 차트가 됩니다. 조각이 두 개뿐이면 숫자 하나(스탯 타일)가 더 잘 읽힙니다.

추세/시계열 데이터용 영역 차트. gradient 옵션으로 그라데이션 채우기를 지원합니다.

비교 데이터용 막대 차트. 카테고리 간 값 비교를 시각화합니다.

연속 데이터용 선 차트. 시간에 따른 추세나 변화를 시각화합니다.

date math(now-7d, now/d) 기반 시간 범위 컨트롤. quick select, 프리셋/최근 사용, 명시적 Update, 자동 갱신, 창 이동·확대/축소 버튼을 제공합니다.

통계 요약 행. StatCard 그리드 레이아웃을 표준화합니다. loading 시 SkeletonCard 표시.

필터링 바 컴포넌트. 검색, 선택, 다중 선택 필터 지원.

페이지 제목·상태·탭·작업·조회 조건을 구분하고 가용 폭에 맞춰 재배치합니다.

드롭다운 선택 컴포넌트. 5-part anatomy: Root, Label, Trigger, Popover, Item.

트레이스의 스팬을 하나의 시간축에 놓는 워터폴. 부모-자식 관계로 들여쓰고 접을 수 있으며, 실패한 스팬은 색이 아니라 표식으로 알린다. 아무 스팬도 덮지 않는 유휴 구간은 접어서 짧은 호출이 점으로 뭉개지지 않게 한다 — 접히는 것은 위치뿐이고 표시되는 소요 시간은 실제 값이다.

세션 리플레이 플레이어의 프레임. 스테이지·메타 바·컨트롤·리사이즈 가능한 인스펙터를 배치하고, 플레이어 전체의 전체화면과 입력 필드를 피하는 키보드 단축키 범위를 소유한다.

세션 리플레이 재생 컨트롤. 재생/일시정지, 앞뒤 점프, 배속 메뉴, 비활성 건너뛰기 토글, 전체화면, 경과/시계 타임코드 전환을 제공하며 재생 상태는 호스트가 소유한다.

세션 리플레이의 탐색 트랙. 활동/비활성/미로딩 구간, 활동 밀도, 이벤트 마커를 한 플레이헤드 아래에 겹쳐 그리고, 드래그·키보드 탐색이 끝났을 때만 seek을 커밋한다.

도메인 무관 2단계 조건 트리 편집기. 그룹 AND/OR, 순서·복제·부정·오류를 셸이 맡고 조건 문장은 소비자가 Expression 칩으로 렌더링합니다.

2~3개 집합을 면적 비례 원으로 그리는 순수 SVG 벤 다이어그램. 2집합은 겹침 면적을 정확히 풀고, 3집합은 쌍별 거리로 근사합니다. 배타 영역별 hover/클릭과 숨김 표를 제공합니다.

AND/OR 로직으로 조건 그룹을 구성하는 빌더. 속성, 연산자, 값을 조합합니다.

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

스키마·편집기·출력의 3-pane 쿼리 워크스페이스. 패널은 리사이즈되고 사이드바는 접히며, storageKey로 레이아웃을 기억합니다. 툴바·편집기·출력은 슬롯입니다.

쿼리에 이름·설명·공개 여부를 붙여 저장하는 다이얼로그. 편집기에 문장이 여럿이면 어느 문장을 저장할지 넘겨 보며 고릅니다.

실행 이력 목록. 각 실행의 성공/실패, 시각, 행 수, 경과를 보여주고 편집기로 되돌리거나 다시 실행합니다.

실행마다 바뀌는 값을 이름 붙여 두는 변수 메뉴. SQL은 {variables.name}으로 참조하고 치환은 호출자가 합니다.

기간과 속성 조건을 데이터로 들고 {filters} 플레이스홀더로 SQL에 전달하는 메뉴. 플레이스홀더가 없으면 조건이 적용되지 않는다고 경고하고 삽입 버튼을 제공합니다.

결과 행을 차트로 그리는 빌더. 첫 문자·날짜 컬럼을 축으로, 숫자 컬럼을 값으로 고르고, 한 행 한 숫자면 큰 숫자로 보여줍니다. 설정은 호출자가 들고 있어 저장 쿼리와 함께 보관됩니다.

쿼리 결과가 놓이는 출력 패널. 대기·실행 중·오류·취소·완료 상태를 그리고, 완료는 표·차트·좌우 분할로 전환하며, 상태바에 행 수·경과·읽은 바이트·절단 여부를 남깁니다.

실행 버튼 하나가 상태를 말하는 쿼리 툴바. 변경됨/현재/실행 중을 색과 문구로 구분하고, 실행 중이면 취소로 바뀌며, 선택 영역·전체 실행은 분할 버튼 뒤에 둡니다.

쿼리할 수 있는 테이블과 컬럼을 타입 글리프와 함께 보여주는 트리. 테이블·컬럼을 함께 검색하고, 이름을 커서에 삽입하거나 테이블을 미리보기합니다.

SQL 에디터. CodeMirror 기반의 SQL 편집기로 구문 강조와 자동 완성을 지원합니다.

쿼리 결과 테이블. 타입이 표시되는 헤더, 로컬 정렬, 컬럼 리사이즈, 행 상세 패널을 갖추고 행을 윈도잉해 만 행도 스크롤로 다룹니다. NULL·불리언·객체를 빈칸 대신 글자로 씁니다.

단계별 사용자 경로 흐름. 각 단계의 상위 항목 카드와 단계 사이 전환 리본, 단계에서 끝난·시작한 세션을 함께 그립니다. 고정 높이 grid와 카운트 비례 sankey 두 변형, 호버 시 연결 경로 강조와 툴팁을 제공합니다.

인사이트 대시보드 Surface. InsightsPanel 래핑 + 탐지 실행, 시간 범위 필터, 에러 표시, dismissed 토글, 탐지 메서드/파라미터 제어.

커스텀 대시보드 Surface. WidgetGrid + ReportBuilder + ReportWidget + FilterBar 조합.

이벤트 카탈로그 Surface. Query 하나가 필터 상태 전부이고, 상세는 인스펙터로 열려 목록이 화면에 남습니다.

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

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

실시간 대시보드 Surface. ConnectionIndicator + StatCard + ActivityFeed 조합.

프로젝트 설정 Surface. SettingsForm + DataTable + CodeSnippetViewer + Retention Policy + Cleanup Preview + Storage Usage 조합.

리텐션 히트맵 분석 Surface. RetentionHeatmap 래퍼.

SQL 에디터 + 쿼리 결과 테이블. SqlEditor와 QueryResultsTable 조합.

속성 카탈로그 Surface. 발견된 속성을 스코프·타입으로 훑고, 추론된 타입은 추론이라고 표시합니다.

카탈로그 목록의 공통 뼈대. 헤더·통계·고지·필터·인스펙터·페이지네이션·일괄 작업과 빈/에러 상태를 담고, 필터나 페이지가 바뀌면 선택을 비웁니다.

QueryBar와 필터 버튼이 하나의 Query를 공유합니다. 버튼은 상태를 갖지 않고 Query를 읽어 활성 여부를 계산합니다.

목록과 인스펙터의 2-pane 레이아웃. 넓으면 밀어내고(push) 좁으면 덮으며(overlay), 닫을 때 포커스를 열었던 자리로 되돌립니다.

목록을 화면에 둔 채 레코드를 옆에서 보여주는 상세 패널. 모달이 아니다 — 포커스 트랩·aria-modal·inert 없이 Escape로 닫고 포커스를 되돌린다.

기본 이벤트 메타와 호출자 소유 섹션을 한 폼에서 편집하고, footer의 한 액션으로 함께 저장할 수 있습니다.

검색 가능한 속성 목록을 그룹별로 표시하고, 숨김 상태와 호출자 소유의 명시적인 편집 액션을 함께 제공합니다.

이벤트 아이콘. semantic key 또는 ReactNode 아이콘과 배경색을 표시합니다.

토스트 알림 시스템. 포인터/키보드 상호작용 중 자동 닫힘을 일시 정지하고, 중요도별 live region으로 전역 알림을 관리합니다.

제네릭 데이터 테이블. 제목은 opt-in이고 ariaLabel로 grid를 이름 붙이며, 동적 컬럼·안전 정렬·키보드 리사이즈·Composite 탐색을 지원합니다.

이벤트 스파크라인. 라벨, 값, 변화량과 미니 차트를 표시합니다.

인라인 미니 차트. 작은 공간에서 추세를 빠르게 시각화합니다. StatCard, 테이블 셀 등에서 사용합니다.

opt-ui 스타일의 list/listitem 차트 범례. 인터랙티브 항목은 실제 button으로 시리즈를 토글합니다.

선택지를 모두 보여주는 단일 선택 컨트롤. radio-group 프리미티브 위에 올려 화살표 키가 동작합니다.

값을 클립보드에 올리고 성공 여부를 알립니다. 클립보드 거부를 삼키지 않습니다.

점 + 텍스트로 상태를 표현합니다. 라벨이 필수라 색만으로 상태를 말할 수 없습니다.

페이지에 머무는 인페이지 고지. Alert와 달리 dismiss가 없고, 조건이 참인 동안 레이아웃의 일부로 남습니다.

독립적인 라디오 그룹 컴포넌트. 그룹 설명과 항목별 설명을 분리 연결하고 다양한 크기를 지원합니다.

독립적인 체크박스 컴포넌트. 레이블, 설명, 그룹과 DOM property까지 동기화되는 indeterminate 상태를 지원합니다.

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

필드 타입을 일관된 글리프와 선택적 텍스트 레이블로 표현합니다. 문자열·숫자·날짜·IP·지오 등 분석 스키마 타입마다 같은 아이콘과 팔레트 슬롯을 씁니다.

합성 점수를 축별로 분해해 보여준다. 총점과 함께 각 축의 값·가중치·의미를 노출해 '43'을 판정이 아니라 발견으로 만든다.

이벤트를 순서로 읽히게 하는 타임라인. 인접 이벤트 사이의 경과 시간을 라벨링하고, 속성 페이로드를 제자리에서 펼치며, 세션 단위 그룹핑을 지원한다.

리텐션 히트맵. 코호트별 사용자 유지율을 색상 강도로 시각화합니다.

사람(또는 익명 디바이스)을 목록 셀 한 칸으로 표현한다. 이름→이메일→ID 폴백과 익명 표식을 한 곳에서 처리한다.

한 대상의 라벨 있는 사실들을 시맨틱 <dl>로 표시한다. 상세 패널의 필드 나열을 표준화하고 식별자 복사를 제공한다.

데이터가 없을 때 표시하는 빈 상태 컴포넌트. 아이콘, 제목, 설명, 액션 버튼 지원.

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

컬럼 표시 여부, 행 밀도, 전체 화면을 DataGridToolbar 하나로 연결합니다. 식별 컬럼은 잠가 숨김을 막고, 같은 상태가 실제 DataGrid 렌더링에 즉시 반영되는 운영 그리드 예제입니다.

opt-ui와 opt-datagrid로 만든 Airtable 스타일 캠페인 워크스페이스. 타입별 셀 편집, 필터·정렬·그룹, 저장 뷰, 보드, 상세 패널, 일괄 승인·복제·삭제, 실행 취소와 로컬 저장을 제공합니다.

브레이크다운 값마다 작은 시계열 패널 하나씩을 격자로 그리는 트렐리스. y축을 공유해 크기를 비교 가능하게 유지하고, 상위 값부터 정렬하며 긴 꼬리는 접는다. 한 패널에 커서를 올리면 모든 패널의 크로스헤어가 함께 움직인다.

쿼리가 도는 동안 차트의 실루엣을 잡아 두는 플레이스홀더. 실제 높이와 축 레일을 유지해 데이터가 도착해도 레이아웃이 튀지 않는다.

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

대시보드 제목·지표 이름처럼 읽히는 횟수가 훨씬 많은 값을 그 자리에서 고치는 편집. Enter 확정, Escape 되돌리기, 거절된 저장은 입력을 유지한다.

시각화 색 팔레트를 그 팔레트의 모습 그대로 보여 주고 고르게 하는 컴포넌트. 범주형은 블록, 순차·발산형은 그라디언트로 그려 데이터 종류를 그림이 말한다.

라이브 뷰의 변화를 스크린 리더에 읽어 주는 영역. 스로틀로 폭주를 요약하고 두 노드를 번갈아 써서 같은 문구도 다시 읽힌다.

검색어에 해당하는 구간을 <mark>로 표시. 긴 항목 우선 매칭이라 겹치는 검색어도 조각나지 않는다.

실제 폰트로 실제 가용 폭을 측정해 문자열의 식별력이 가장 낮은 부분을 잘라내는 생략. CSS가 못 하는 앞·중간·양끝 생략을 지원하고 전체 문자열은 접근성 트리에 남는다.

조건을 폼이 아니라 문장으로 쓰고 그 자리에서 편집하는 표현식 절. 알림 규칙·세그먼트 필터처럼 읽어서 검증해야 하는 조건에 쓴다.

필드 값 분포를 카운트와 점유율 막대로 보여주고 그 행 자체가 필터가 되는 패싯. 긴 꼬리는 접어 두고 상위 값부터 읽힌다.

문서 편집, 실행 취소·다시 실행, 변경 사항 감지와 저장 버전 미리보기를 연결합니다. 저장한 EditorSpec을 복원하는 작업도 하나의 기록으로 남아 다시 취소할 수 있으며, 저장 데이터는 페이지 메모리에만 유지됩니다.

저장된 EditorSpec의 제목, 본문, 콜아웃과 중첩 목록을 StaticRenderer로 출력합니다. 편집 엔진 없이 게시 화면과 읽기 전용 미리보기를 만들 때 사용하는 구성입니다.

테마 프리셋 선택기. 프리셋과 light/dark/system 모드 전환.

Sticky 페이지 사이드 aside chrome. 고정 너비 + header/body/footer 3-slot.

cmdk 스타일 명령 anatomy. 자동 필터링 + 키보드 내비게이션. 인라인 또는 CommandDialog로 사용.

Popover 프리미티브 래퍼. 트리거 요소에 연결된 플로팅 콘텐츠를 표시합니다.

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

모달 다이얼로그. 9-part anatomy: Root, Disclosure, Panel, Heading, Description, Dismiss, Header, Body, Footer.

mode="diff"와 suggestionDecorations로 제안을 검토하고, 수락한 내용은 문서에 반영하며 거절한 내용은 원문을 유지하는 예제입니다.

EditorProvider, BlockTree, BlockToolbar로 작성 영역을 직접 조합합니다. 편집할 때 바뀌는 문서 버전과 실행 취소·다시 실행 버튼을 통해 UI와 store의 동기화를 확인합니다.

Editor와 createEditorStore로 제목, 본문, 콜아웃을 편집합니다. 텍스트나 블록을 직접 바꿔 기본 작성 동작을 확인할 수 있으며 변경은 현재 페이지의 메모리에만 유지됩니다.

opt-editor와 opt-ui로 만든 문서 워크스페이스입니다. 슬래시 명령, 서식 편집, 중첩 페이지, 검색, 즐겨찾기, 템플릿, 댓글, 휴지통 복원과 브라우저 자동 저장을 지원합니다.

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

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

데이터 기반 설정 폼. 유효성 검증, 라디오, 체크박스 지원.

1~N점 별점을 선택하는 인터랙티브 레이팅 입력. 읽기 전용 표시도 지원.

설정 페이지의 사이드바 + 콘텐츠 레이아웃. SidebarNav + children 슬롯 조합.

변경 이력 타임라인. 액션별 색상 코딩 + 확장 가능한 diff 뷰.

감사 로그 타임라인. 아바타 + 액션 텍스트 + 메타데이터 배지 레이아웃.

시간 범위 선택기. Popover + DateRangePicker + 프리셋 버튼 조합. 12개 시계열 Surface에서 사용.

리포트 빌더. 레이블이 연결된 4단계 위저드 (차트 타입 → 데이터 설정 → 스타일 → 미리보기).

파일 선택, 메타데이터 표시, 이미지 미리보기를 포함한 업로드 폼. 파일 크기 제한, 설명 입력 지원.

숫자 입력 컴포넌트. +/- 버튼, nullable/clear, unit suffix, invalid draft alert, min/max, step, 키보드 화살표를 지원합니다.

태그 입력 컴포넌트. 텍스트를 입력하고 Enter로 태그를 추가, Backspace로 삭제합니다.

날짜 범위 선택 컴포넌트. 프리셋, 달력 UI, 포커스 관리와 RTL 방향 탐색 아이콘을 지원합니다.

범용 카드 컨테이너. Header, Title, Description, Content, Footer 하위 컴포넌트 포함.

멀티라인 텍스트 입력. Input과 동일한 API (label, error, hint).

토글 스위치 컴포넌트. 3가지 크기와 레이블/설명의 명시적 접근성 연결을 지원합니다.

독립적인 텍스트 입력 컴포넌트. 레이블, 에러, 힌트, 아이콘 지원.

인라인 상태 뱃지. 5가지 색상 변형, 상태 점(dot) 옵션 지원.

접근성 폼 시스템. opt-ui-primitives Form API 기반. 31 exports: FormRoot, FormProvider, FormGroup, FormGroupLabel, FormDescription, FormField, FormControl, FormInput, FormTextarea, FormSelect, FormSelectPopover, FormSelectItem, FormSwitch, FormLabel, FormError, FormSubmit, FormCheckbox, FormRadioGroup, FormRadio, FormPush, FormRemove, FormReset, FormNumberInput, FormSlider, FormStarRating, FormColorPicker, FormIconPicker, FormTagInput, FormDateRangePicker + useFormStore, useFormContext hooks.

툴바 컨테이너 + 툴팁. 7 exports: ToolbarRoot, ToolbarContainer, ToolbarButton, ToolbarSeparator, TooltipProvider, TooltipAnchor, Tooltip.

실제 ReoptRecordTable Surface에 로컬 EAV 응답을 연결합니다. values 기반 컬럼 자동 추론·attributeLabels·서버 페이지네이션·행 선택과 로딩/빈 결과/실패 복구를 확인할 수 있습니다. 실제 연결은 서버에서 사용자 권한을 검증하고 machine credential로 SDK를 호출합니다.

실제 ReoptAiImageStudio Surface에 로컬 fetcher를 연결한 미리보기입니다. 프롬프트·비율·스타일로 SVG 예제 이미지를 생성하고 최근 기록·실패·재시도를 확인합니다. 실제 AI 호출이나 크레딧 차감은 없습니다.

opt-chat의 Conversation·PromptInput·ModelSelector로 구성한 로컬 채팅 시뮬레이션입니다. 준비된 응답의 스트리밍·중단·추천 프롬프트를 확인하며 실제 모델 호출이나 크레딧 차감은 없습니다. 설치용 ReoptAiChat 연결 예제를 함께 제공합니다.

세션 만료 모달과 강제 재로그인 옵션을 비교하는 로컬 시뮬레이션입니다. 트리거 버튼으로 모달을 열고 forceReauth에 따른 ESC·배경 닫기와 데모 재로그인을 확인합니다.

보호된 콘텐츠의 로딩·비로그인·로그인 분기를 직접 확인하는 로컬 시뮬레이션입니다. 로그인 버튼은 데모 상태만 바꾸며, 설치한 SignInGate Surface는 실제 authClient.useSession()과 OAuth CTA를 사용합니다.

사용자 메뉴의 로딩·비로그인·로그인 상태와 로그인/로그아웃 전환을 조작하는 로컬 시뮬레이션입니다. 설치한 ReoptUserMenu Surface는 실제 세션 상태로 자동 분기합니다.

Reopt OAuth 버튼의 대기·성공·실패 흐름을 opt-ui Button과 Toast로 확인하는 로컬 시뮬레이션입니다. 실제 로그인은 수행하지 않으며, 설치한 SignInWithReoptButton Surface는 형제 reopt-auth 헬퍼로 OAuth를 연결합니다.

brandapp-sdk 인증, SDK verifier, OAuth secret rotation, EAV drift remediation, AI credit guard, webhook replay, 약관 publish 클라이언트를 한 화면에서 점검하는 운영 콘솔형 Surface입니다.

릴리스 직전 점검을 대화로 진행하는 에이전트입니다. 설치 스모크·브라우저 매트릭스·스트리밍 소크 게이트를 골라 실행하면, 도구 실행 결과를 결정적 fixture로 대화 안에 렌더링합니다.

여러 단계 작업을 마친 에이전트의 결과를 검토하는 화면입니다. 에이전트 카드와 작업 큐, 생성된 코드 패치(Artifact), 터미널·테스트 결과를 한 화면에 묶어 계획부터 검증까지 흐름을 보여줍니다.

도구 실행 전 승인 UX를 로컬 상태로 실습하는 예제입니다. 실제 마이그레이션은 실행하지 않습니다. Confirmation 컴포넌트로 승인 대기 → 승인 → 거부 상태를 나눠 처리하고, 결과를 같은 대화 안에서 이어 보여줍니다. 승인/거부 버튼을 눌러보세요.

한 번의 답변 안에 생각 과정, 도구 실행, 출처가 어떻게 함께 렌더링되는지 보여줍니다. 메시지의 parts 배열을 MessageParts에 넘기기만 하면 각 타입에 맞는 UI가 자동으로 매핑됩니다.

Conversation·Message·PromptInput을 조합하고 미리 준비한 로컬 답변으로 대화를 이어갑니다. 외부 AI 호출 없이 메시지를 보내면 질문이 화면 상단에 자연스럽게 자리잡는 턴 앵커링 스크롤을 함께 확인할 수 있습니다.

opt-chat의 Conversation, Agent, Tool, Queue, Context, Sources를 묶고 agent memory, approval-gated EAV patch, rollback audit, replay audit export, eval suite, release gate, brandapp-sdk AI route를 전제로 한 운영 에이전트 앱입니다.

모델 호출 없이 eve 에이전트 세션을 재생합니다. 추론, 하위 에이전트 펼침, 스킬, 색 방향 질문(선택지·자유 입력), 게시 승인과 거절, 기기 코드 로그인을 @reopt-ai/opt-chat/eve가 eve 메시지 그대로 렌더하고, 답하면 세션이 다음 단계로 이어집니다.

모델 호출 없이 계획, 승인, 중간 도구 결과, 터미널 출력과 최종 성공·실패를 재생합니다. 질문 응답과 실제 AI SDK 전송 상태를 연결하고, 피드백과 대화 복원을 확인합니다.

연결 실패를 주입해 목록과 업로드 오류를 확인하고, 같은 커넥터에서 연결을 복구한 뒤 실패한 작업을 재시도합니다. 샘플 파일 버튼과 작업 기록으로 개인 파일 없이 전체 흐름을 실습할 수 있습니다.

useFileManager 상태에 툴바, 브레드크럼, 목록·그리드, 선택 액션, 상세 패널과 업로드 큐를 연결합니다. 파일 생성·업로드와 보기 전환이 커스텀 레이아웃에서도 실제로 동작합니다.

업로드 파이프라인 전체를 압박 상황에서 봅니다 — 동시성 제한 큐와 집계 진행률, 디렉토리 트리를 재현하는 폴더 드래그앤드롭, 클립보드 붙여넣기 업로드, 사용량 미터를 움직이는 빡빡한 저장공간 쿼터까지.

brandapp files 커넥터 표면을 재현합니다 — 폴더·이름 변경이 없는 평평한 네임스페이스, 클라이언트 측 업로드 상한, 사용 중 파일 삭제의 409 거부가 오류 배너로 표면화되는 흐름.

인메모리 mock 커넥터 위에서 FileManager 컴포짓 전체를 실행합니다 — 폴더 탐색, 목록/그리드 전환, 진행률 큐가 있는 업로드, 파일 상세 패널까지.

snapshot version, stale response 보호, telemetry, 화살표 키로 날짜 컬럼을 이동하는 읽기 전용 week grid를 포함한 visible-window 원격 이벤트 로딩 예제입니다.

JSON Patch를 shadow calendar로 스트리밍하고, 승인 전 live grid에 pending 변경을 표시한 뒤 하나의 undo 가능한 커밋으로 적용하거나 폐기합니다.

날짜 그리드, 시간 슬롯, 좌석 수, 휴무일 override, 가용성 규칙 기반 예약 라이프사이클을 갖춘 고객용 예약 UI입니다.

월간 뷰, 평일 반복, 종일 일정, 시간 지정 이벤트, 화살표 키 그리드 내비게이션, 활성화 콜백, 편집 가능한 이벤트 생성을 하나의 제품형 캘린더 fixture로 구성했습니다.

useDataGridRemoteDataSource에 openView, 화면 범위 조회와 일괄 저장을 연결합니다. 아래로 스크롤해 지연 로딩을 확인하고 셀을 수정해 저장 상태를 확인할 수 있으며 서버 대신 메모리 mock을 사용합니다.

샘플 계정 5,000개를 가상 스크롤로 탐색하고 편집합니다. getRowId, valueCache, rowBufferPx를 적용한 구성으로 행 식별과 캐시를 유지하며 변경은 현재 세션에만 남습니다.

상태 배지, 읽기 전용 메트릭 컬럼, 빠른 스캔 UX를 운영 대시보드 문맥으로 정리한 예제입니다.

실제 모델이 보낸 응답을 받은 그대로 재생합니다. YAML 응답이 패치로 바뀌어 표가 한 칸씩 채워지고, 기존 값은 제안으로 남으며, 재생 중에 고친 칸은 절대 덮어쓰지 않습니다. 계산 열과 정렬은 한 줄로 끝나고, 수식으로 안 되는 열은 행마다 모델에 묻습니다.

월별 원장 작업 공간입니다. 행 아래 복합분개 영역이 부모 그리드와 하나의 키보드 격자로 이어지고, 금액 칸은 천 단위 구분과 계산식을 받습니다. 입력 중인 분개는 닫아도 유지되고, 저장은 막히는 칸으로 바로 이동합니다. 입금·대변은 적색, 출금·차변은 청색, 음수는 적색 괄호로 표기합니다.

복식부기 분개 입력 그리드입니다. 컬럼마다 date·select·text·number·checkbox·textarea 에디터를 지정하고, 스칼라로 표현되지 않는 배분은 custom 에디터로 편집합니다. keyboardFlow로 Enter 이동 방향과 연속 편집을 바꾸고, validateCell이 잘못된 분개의 커밋을 막습니다.

셀을 더블클릭해 편집하고 Enter로 저장하거나 Escape로 취소합니다. DataGrid의 onRowsChange와 onCellCommit을 연결해 실제 행 값과 마지막 커밋 내용을 함께 갱신합니다.

행별 평가 실행·취소·재시도, 편집 후 재평가 상태, 점수·신뢰도와 검토 필터를 보여줍니다. 모의 평가와 인증된 Jev 실제 평가, 저장 결과 재조회·상세 분포를 제공합니다.

선택한 행의 평가, 공급자·길이 기준 변경, 429·시간 초과·저장 실패·취소 후 복구를 실습합니다. 로컬 규칙과 모의 장애만 사용하며 AI 호출은 없습니다.

searchShellPatterns로 recipe, slot, policy, adapter, audit-rule, anti-pattern 패턴을 키워드 검색합니다.

computeShellCoverage로 샘플 라우트와 rollout target을 대조합니다. 남은 라우트 적용 버튼을 눌러 커버리지, recipe별 집계와 미적용 경로가 함께 갱신되는지 확인할 수 있습니다.

computeCompletenessScore로 audit finding을 7개 카테고리로 분류하고 0-100 가중 평균 점수를 산출합니다.

ShellFullscreenToolSurface로 승인/검수 단계를 recipe 화면 밖의 독립 surface로 분리합니다.

EditorWorkspace와 ShellEditorAdapter 조합으로 authoring chrome과 editor engine의 소유 경계를 분리합니다.

ListWorkspace 안에서 ShellDataGridAdapter가 toolbar, status, footer chrome을 소유하면서 opt-datagrid 엔진을 유지합니다.

ShellFlyoutAside로 상세 패널을 overlay/push 방식으로 열어 메인 화면 문맥을 유지한 채 부가 정보를 띄웁니다.

ShellBottomBar로 선택 액션과 승인 액션을 화면 하단에 sticky하게 붙여 작업 맥락을 유지합니다.

ShellCollapsibleNav, ShellNavItem, ShellNavAccordion 조합으로 접히는 product nav를 구성합니다.

ShellPolicyToggler로 density, width, navigation mode 같은 정책을 화면에서 직접 조정합니다.

loading, empty, error 상태를 ShellStateBoundary로 통일해 화면 별 copy와 상태 카드 리듬을 고정합니다.

ShellProvider와 ShellLandingPage로 데이터 운영 안내의 hero, 단계별 소개, footer를 같은 정책 아래 묶습니다.

ListWorkspace에 toolbar와 section body를 얹어 목록형 운영 화면의 기본 리듬을 보여줍니다.

DashboardWorkspace와 ShellSection으로 상단 헤더, 메트릭 카드, 사이드 패널이 있는 기본 운영 화면을 구성합니다.

AI 챗봇 어시스턴트 화면. ChatSidebar + ChatMessageList + ChatInput 조합.

워크플로우 실행 이력 화면. 검색/상태 필터 + DataTable + 상세 Dialog 탭 뷰 조합.

배포 관리 통합 대시보드. BranchSelect + StatusSelect + QuickActions + DeploymentTimeline + DomainTable + EnvPanel 조합.

작업 관리 대시보드. TaskList + ActivityFeed + TeamMemberList + QuickActions + FilterBar 조합.

Vercel 스타일 프로젝트 개요 영역. DashboardGrid + DeploymentTimeline + EnvPanel 조합.

필터링 가능한 데이터 탐색 영역. `spacing="group"` BlockLayout 안에서 SearchCombobox + StatusSelect + DataTable을 조합.

프로젝트 개요 Surface. SummaryRow + NavCards + LineChart + BarChart + DataTable + CodeSnippetViewer + Dashboard CRUD 조합.

사용자 상세 프로필 Surface. Avatar + StatCard + GaugeChart + Progress + DataTable + FilterBar 조합.

다차원 테스트 품질 분석 대시보드. Summary cards + 6-tab multi-chart (Overview/Stability/Failures/Flaky/Performance/Advanced).

스크린샷 비주얼 리그레션 관리 + 승인 워크플로우. 3-column 레이아웃 — 스냅샷 리스트 + 이미지 diff 뷰어.

E2E 테스트 디버깅 워크스페이스. 2-pane 레이아웃 — 사이드바 테스트 목록 + 탭 콘텐츠 뷰어 (Video/Screenshots/Network/Console/Trace).

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

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

사용자 탐색 Surface. DataTable + FilterBar 조합.

세그먼트 관리 Surface. DataTable + SegmentBuilder 조합.

분석 대시보드 Surface. StatCard + LineChart + BarChart 조합.

빌링 페이지 Surface. StatCard + BarChart + DataTable 조합.

알림 관리 Surface. DataTable + AlertBuilder 조합.

데이터에 어떤 필드가 있고 각 필드가 무슨 값을 갖는지 보여주는 사이드바. 값 분포 막대, 컬럼으로 승격, 값 기준 포함/제외 필터를 제공합니다.

검색과 필터를 한 입력으로 합친 쿼리 바. field:value, -부정, (a or b), 비교 연산, 필드·값 자동완성, 절(clause) 칩을 지원합니다.

계속 도착하는 로그용 윈도잉 테이블. 컬럼 정의 기반, 상단 삽입 시 스크롤 위치 보존, follow 상태 보고, 셀 값 즉시 필터, 밀도·정렬을 지원합니다.

시간 범위 컨트롤과 시계열 차트를 한 단위로 묶은 패널. 드래그 줌과 줌 히스토리(되돌리기), 범례 토글을 포함합니다.

채팅 메시지 목록. 역할별 말풍선, 타이핑 인디케이터, 자동 스크롤.

채팅 입력 컴포넌트. 자동 리사이즈 textarea, 파일 첨부, 모델/스타일 Select.

AI 채팅 사이드바. 대화 목록, 검색, 새 대화 버튼.

알림 센터. 벨 아이콘 트리거 + 미읽음 배지 + 스크롤 알림 목록.

필터 프리셋 관리. 키보드 목록 탐색, 현재 필터 저장, 안전한 삭제 확인 흐름을 제공하는 Popover UI.

일괄 작업 바. 선택 카운트 배지 + DropdownMenu 액션 목록 + 해제 버튼.

메가 메뉴. Popover + CSS grid 멀티컬럼 + 카테고리 헤딩 + footer 슬롯.

데이터 임포트 마법사. 4단계: 업로드 → 컬럼 매핑 → 미리보기 → 확인.

피처 플래그 관리 패널. 플래그 토글 + 환경 배지 + 롤아웃 % 조절.

웹훅 설정 패널. URL 입력 + 이벤트 체크박스 + 재시도 설정 + 테스트 버튼.

코드 비교 뷰어. LCS 알고리즘 기반 unified/split 모드 diff와 포커스 가능한 스크롤 영역을 제공합니다.

마크다운 리치 텍스트 에디터. 서식 툴바 + textarea 조합.

칸반 보드. HTML5 DnD로 카드를 컬럼 간 드래그&드롭.

인라인 편집 테이블. 더블클릭으로 셀 편집, Enter 확정, Escape 취소.

계층형 트리 테이블. 재귀 행 렌더링 + 펼침/접기 셰브론.

테이블 컬럼 표시/숨김 토글러. Popover + Checkbox 리스트입니다.

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

비동기 검색 콤보박스. 디바운스 + 로딩 스피너와 stale response 방어를 내장합니다.

확인/취소 대화 상자. danger 변형으로 위험 작업 확인을 지원합니다.

Header + Sidebar + Content + Footer 4영역 페이지 레이아웃 템플릿. AppShell.Sidebar는 모든 viewport에서 기본 표시되며 반응형 숨김/Drawer 전환은 소비자가 제어합니다.

접기/펼치기를 지원하는 compound 사이드바. Header/Content/Footer 구조 + Group/Item으로 네비게이션 구성. Ctrl+[ 단축키.

AI 프롬프트 뷰어/헬퍼. 변수 입력 → 실시간 치환 → 복사 기능.

비교 선택기. 고유 레이블이 연결된 Select × 2 + Swap 버튼 조합. CohortComparison, FunnelAnalysis 등에서 사용합니다.

데이터 내보내기 버튼. CSV/JSON 변환 내장, PDF는 콜백 위임. DropdownMenu 기반.

이상 탐지 인사이트 패널. severity별 카드, 통계 필터, dismiss 기능, 검출 설정(유형/Z-score/days).

세그먼트 빌더. 각 조건 컨트롤의 접근 가능한 이름을 유지하며 event, property, cohort, custom 세그먼트를 정의합니다.

위젯 그리드. react-grid-layout 래퍼로 드래그/리사이즈 가능한 대시보드 위젯을 배치합니다.

알림 빌더. 명시적으로 연결된 폼 레이블로 메트릭 조건, 빈도, 채널을 구성합니다.

코드 스니펫 뷰어. 줄 번호, 복사 버튼, 포커스 가능한 스크롤 영역, syntaxTheme 톤을 지원합니다.

워크플로우 캔버스. 그리드 셀 기반 스텝 배치, SVG 연결선, 키보드 이동을 지원합니다.

키-값 쌍 편집기. 동적 행 추가/삭제, 비밀값 토글, 유효성 검사를 지원합니다.

실패 목록 패널. severity별 색상 강조, 그룹핑, 액션 슬롯을 지원합니다.

템플릿 선택기. 카테고리별 그리드와 검색을 제공하며 featured/tags 표시를 지원합니다.

플로팅 액션 바. 선택된 항목에 대한 일괄 작업 버튼을 하단에 표시합니다.

연결 상태 표시기. connected, connecting, disconnected, error 상태를 지원합니다.

런타임 필드 추가/제거 폼. 최소/최대 필드 수 제약, 개별 검증, 동적 스토어 업데이트 지원.

다단계 순차 입력 폼. FormFieldDef 기반 필드 정의, 단계별 검증, 현재 단계가 연결된 진행 표시기, 리뷰 단계를 지원합니다.

로그인/회원가입 모드 전환 가능한 인증 폼. 이메일·비밀번호 검증, FormSwitch로 로그인 상태 유지 옵션 지원.

팀원 목록 컴포넌트. 온라인 상태, 다양한 레이아웃(list, compact, avatars-only) 지원.

빠른 작업 패널. 그리드/리스트 레이아웃, 단축키 표시 지원.

활동 피드/로그 컴포넌트. 타임라인 스타일, 상대 시간 표시.

작업 목록 관리 컴포넌트. 우선순위, 상태, 담당자, 태그, 하위 작업 지원.

디자인 시스템 참조 패널. 프리미티브 맵, 키보드 패턴, Tailwind 셀렉터, 접근성 속성 등 6개 섹션 제공.

도메인 테이블. Composite 기반 그리드로 키보드 탐색 지원.

Git 브랜치 선택 드롭다운. Select primitive 래퍼.

환경변수 패널. Disclosure로 환경별 그룹 접기/펼치기, Composite로 변수 탐색.

프로젝트 검색 전환기. Combobox + match-sorter 퍼지 검색 지원.

배포 단계 타임라인. Composite 기반 키보드 탐색 지원.

CommandPalette + Cmd+K 키보드 단축키 자동 바인딩.

Cmd+K 스타일 커맨드 팔레트. Dialog + Combobox + match-sorter 퍼지 검색.

데스크톱 스타일 메뉴바. 체크박스, 라디오 메뉴 항목 지원.

Composite 기반 사이드바 네비게이션. pathname 자동 동기화.

리치 텍스트 에디터 스타일 툴바. Toolbar + Tooltip 조합.

색상 인디케이터가 있는 상태 선택 드롭다운.

match-sorter 기반 퍼지 검색 콤보박스.

Composite 기반 통계 카드 그리드. 유효한 1–4열 레이아웃과 화살표 키 2D 탐색을 지원합니다.

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

FAQ 질문/답변 아코디언. Composite + Disclosure 조합.

리포트 위젯. 9가지 차트 타입(line, bar, area, pie, scatter, gauge, funnel, sparkline, metric)을 렌더링합니다.

Card + AreaChart 조합. 제목과 설명을 차트의 접근 가능한 이름/설명에 연결해 추세를 표시합니다.

통계 카드 + Sparkline 조합. 주요 지표와 추세를 함께 표시합니다.

시계열 전용 툴팁. 전체 타임스탬프와 타임존, 값 내림차순 정렬, 합계, 이전 기간 대비 델타, 미완료 버킷 경고를 표시합니다.

캔들스틱/OHLC 차트. 기간별 시가·고가·저가·종가를 캔들로 표현합니다(금융 시세). 상승·하락은 상태 색(success/danger)이며 범례가 Up/Down을 밝힙니다. 컨테이너 너비에 맞춰지고 캔들마다 title과 키보드 포커스를 제공합니다.

선버스트 차트. 계층 데이터를 동심 링의 arc로 표현합니다(트리맵의 방사형 짝). arc마다 title과 키보드 포커스로 이름·값·비중을 읽고, 최상위 노드가 둘 이상이면 범례를 보여줍니다.

간트/타임라인 차트. 시간축 위에 태스크별 수평 막대를 배치해 일정·로드맵을 시각화합니다. 컨테이너 너비에 맞춰지고, 그룹이 둘 이상이면 범례를, 막대마다 title과 키보드 포커스를 제공합니다.

인라인 데이터 바. 테이블 셀·카드에서 값을 비례 막대로 표현하는 마이크로 시각화입니다. 기준선 쪽은 각지고 데이터 끝만 둥글며, 음수 범위에서는 0 기준선 눈금과 diverging 색을 씁니다.

불릿 차트. 실측값을 목표 마커·정성 밴드와 함께 표시하는 KPI 게이지입니다. 이름과 값이 보이는 텍스트라 루트는 group이고, 행마다 값·목표를 aria-label과 title로 읽습니다.

박스플롯. 분포의 사분위수(최소·Q1·중앙값·Q3·최대)와 이상치를 요약합니다. 컨테이너 너비에 맞춰지고, 박스마다 title과 키보드 포커스로 다섯 수치를 읽을 수 있습니다.

히스토그램. 연속 값의 분포를 구간(bin)으로 나눠 빈도를 시각화합니다.

트리맵. 계층적 부분-전체 데이터를 면적 비례 사각형으로 시각화합니다. 최상위 셀은 입력 순서의 범주 색을 받고 툴팁·title·키보드 포커스로 이름과 값을 읽습니다.

방사형 진행률/비율 차트. 여러 항목의 값을 동심원 링으로 그려 비교합니다.

다차원 비교용 레이더/스파이더 차트. 여러 축에 걸친 값을 폴리곤으로 그려 항목 간 균형을 비교합니다.

막대·선·영역을 한 축에 결합하는 콤보 차트. 실적 막대와 목표 선처럼 같은 단위의 지표를 다른 모양으로 구분합니다.

버블 차트. x/y 좌표 + 크기 값으로 3차원 데이터를 시각화합니다. ScatterChart와 같은 렌더러를 쓴다.

폭포 차트. 시작값에서 끝값까지의 증감을 단계별 막대로 보여주고, 증가·감소는 상태색으로, 총합은 중립 카테고리색으로 칠합니다.

GitHub 스타일 달력 히트맵. 1년 단위 일별 활동량을 색상 강도로 시각화합니다.

생키 다이어그램. 노드 간 흐름과 비율을 SVG로 그립니다. 컨테이너 너비에 맞춰지고, 링크마다 title·키보드 포커스·hover 강조를 제공하며 알 수 없는 노드를 가리키는 링크는 건너뜁니다.

게이지/미터 차트. SVG 270° 다이얼로 진행률이나 KPI 하나를 보여줍니다. 트랙은 각진 끝, 값 arc는 데이터 끝만 둥글며 min/max 눈금을 함께 표시합니다.

비교 차트. grouped, stacked, mirrored 3가지 레이아웃으로 카테고리 간 비교를 시각화합니다.

산점도 차트. 두 변수 간의 상관관계를 시각화합니다. zKey로 점 크기를 바꿀 수 있습니다.

opt-ui 스타일의 role=tooltip 차트 툴팁. 장식 마커는 숨기고 Recharts Tooltip의 content prop으로 사용합니다.

Recharts ResponsiveContainer를 감싸는 반응형 차트 컨테이너. 접근성 속성과 스타일링을 지원합니다.

ogl 기반 애니메이션 WebGL 셰이더 배경. 럭셔리 프리셋(메탈릭/실크/유리 등) + 색·파라미터로 배경·카드 배경을 만든다. 정지 프레임·PNG 캡처·WebGL 폴백 지원.

React 에러 바운더리. 자식 컴포넌트 렌더 에러를 잡아 fallback UI를 표시합니다.

로딩 오버레이. 중복 status 없이 하나의 aria-busy 라이브 영역으로 콘텐츠 위 로딩 상태를 표시합니다.

가상 스크롤 리스트. 대량 데이터를 윈도잉 기법으로 효율적으로 렌더링합니다.

페이지 넘김 네비게이션. ellipsis 포함 페이지 번호, compact/count variant, totalPages/cursor pagination, Prev/Next 버튼을 제공합니다.

사이드/하단 슬라이드 패널. Dialog 기반 compound 패턴으로 접근성을 보장합니다.

아이콘+텍스트 조합, 이미지, 링크 래핑을 지원하는 로고 컴포넌트. Sidebar 등에서 활용.

Block 팩토리 함수. BlockLayout 래핑을 구조적으로 강제하여 loading/className 처리를 자동화합니다.

Block 루트 레이아웃. 자식 간 section spacing과 선택적 시맨틱 inset을 제공하고 loading prop으로 LoadingOverlay를 자동 래핑합니다.

react-resizable-panels 래퍼. 드래그로 크기를 조절할 수 있는 패널 분할 레이아웃.

시맨틱 스페이싱 블록. 제목이 있으면 aria-labelledby를 자동 설정합니다.

최대 너비 제약과 중앙 정렬을 제공하는 래퍼. 페이지 콘텐츠 폭 제한용.

커스텀 스크롤바를 제공하는 스크롤 컨테이너. 수직/수평/양방향 지원.

범위 슬라이더 입력. native range input 래핑, 범위로 정규화된 값/ARIA 상태, 값 표시와 포맷 함수를 지원합니다.

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

순서가 있는 단계를 추가, 제거, 재정렬할 수 있는 빌더 컴포넌트.

아이콘 선택 컴포넌트. 검색, 그룹별 분류, semantic key 기반 Lucide 아이콘과 커스텀 ReactNode를 지원합니다.

색상 선택 컴포넌트. 프리셋 팔레트와 hex 입력을 지원합니다.

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

범위 내 스칼라 측정값 게이지 (디스크 사용량·점수·용량 등). role=meter로 작업 진행률(Progress)과 구분된다.

진행률 표시. Linear/Circular, determinate/indeterminate 변형과 안전하게 보정된 ARIA 값을 지원합니다.

사용자 아바타. 이미지, 이니셜 자동 생성, 스크린 리더에 노출되는 상태 인디케이터, 그룹을 지원합니다.

로딩 플레이스홀더. text/circular/rectangular 변형. 프리셋 컴포넌트 포함.

알림 메시지 컴포넌트. 4가지 변형(info, success, warning, error), 제목/본문/닫기 버튼 지원.

로딩 상태 표시 스피너. 3가지 크기와 장식용 aria-hidden 모드를 지원합니다.

접근성 버튼 컴포넌트. 4가지 변형(primary, secondary, ghost, danger), 3가지 크기, 로딩/아이콘과 aria-busy 상태를 지원합니다.

자동완성 검색 입력. 7 exports: Root, Input, Popover, Item, Group, GroupLabel, Empty.

접기/펼치기 콘텐츠 영역. 3-part anatomy: Root, Trigger, Content.

Composite 기반 2D 키보드 탐색 컨테이너. 화살표 키로 자식 요소 간 이동 가능.

수직으로 쌓인 펼침/접힘 패널. single(한 개)/multiple(여러 개) 모드와 collapsible 지원.

눌림(pressed) 두 상태 버튼. 단독 사용하거나 ToggleGroup으로 묶어 단일/다중 선택을 만든다.

일회용 코드(OTP)/PIN 입력. 셀 단위 입력, 붙여넣기 분배, 자동 포커스 이동, 백스페이스 네비게이션과 폼 이름/오류 연결을 지원합니다.

콘텐츠를 구분하는 가로/세로 디바이더. 라벨을 넣으면 가운데 정렬 구분선이 된다.

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

문서의 의미 계층과 시각적 타이포그래피 계층을 독립적으로 제어합니다.

본문, 레이블, 보조 설명, 코드에 일관된 의미 기반 타이포그래피를 적용합니다.