@reopt-ai/opt-ui

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

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

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

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

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

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

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

트렌드 방향과 변화량을 표시하는 통계 카드.

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

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

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

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

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

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

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

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

접근성 폼 시스템. 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

페이지 제목, 설명, 액션 슬롯을 제공하는 레이아웃 헤더 컴포넌트.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

비율/구성 데이터용 파이 차트. innerRadius를 설정하면 도넛 차트가 됩니다.

산점도 차트. 두 변수 간의 상관관계를 시각화합니다. Z축으로 버블 크기 조절 가능.

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

게이지/미터 차트. SVG 기반으로 진행률이나 KPI를 시각화합니다.

퍼널 차트. 전환율이나 단계별 감소를 시각화합니다.

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

생키 다이어그램. 노드 간 흐름과 비율을 시각화합니다. 외부 의존성 없이 SVG로 구현.

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

폭포 차트. 양수/음수 델타를 누적 바 차트로 시각화합니다.

버블 차트. x/y 좌표 + 크기 값으로 3차원 데이터를 시각화합니다.

막대·선·영역을 한 축에 결합하는 콤보 차트. 매출 막대와 성장률 선처럼 이종 지표를 함께 비교합니다.

레이더/스파이더 차트. 여러 축에 걸친 다차원 값을 하나의 폴리곤으로 비교합니다.

방사형 막대 차트. 여러 항목의 진행률·비율을 동심원 링으로 표현합니다.

트리맵. 계층적 부분-전체 데이터를 면적 비례 사각형으로 시각화합니다.

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

박스플롯. 분포의 사분위수(최소·Q1·중앙값·Q3·최대)와 이상치를 요약합니다.

불릿 차트. 실측값을 목표 마커·정성 밴드와 함께 표시하는 KPI 게이지입니다.

범용 매트릭스 히트맵. 행×열 값 강도를 색으로 표현합니다(상관행렬·밀도 등).

인라인 데이터 바. 테이블 셀·카드에서 값을 비례 막대로 표현하는 마이크로 시각화입니다.

간트/타임라인 차트. 시간축 위에 태스크별 수평 막대를 배치해 일정·로드맵을 시각화합니다.

선버스트 차트. 계층 데이터를 동심 링의 arc로 표현합니다(트리맵의 방사형 짝).

캔들스틱/OHLC 차트. 기간별 시가·고가·저가·종가를 캔들로 표현합니다(금융 시세).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

제네릭 데이터 테이블. 동적 컬럼, 결측값 안전 정렬, 키보드 컬럼 리사이즈, 보정된 인라인 진행률과 Composite 탐색을 지원합니다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

프로퍼티 탐색기. 검색 가능한 속성 목록을 그룹별로 표시합니다.

쿼리 결과 테이블. SQL 결과와 스크린 리더에 안내되는 로딩, 에러, 빈 상태를 지원합니다.

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

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

이벤트 메타 에디터. 레이블이 연결된 IconPicker + ColorPicker + TagInput 조합으로 이벤트 메타데이터를 편집합니다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

경로 분석 Surface. SankeyChart + 6탭(Flow, Top Paths, Drop-off, Patterns, Entry/Exit, Dwell) + BarChart + DataTable 조합.

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

이벤트 카탈로그 Surface. DataTable + EventIcon + EventSparkline + EventMetaEditor 조합.

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

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

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

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

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

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

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

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

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

필터링 가능한 데이터 탐색 영역. compact SurfaceLayout 안에서 SearchCombobox + StatusSelect + DataTable을 조합.

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

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

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

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

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

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