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

Logo

Component

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

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

아이콘 + 텍스트

ReOptReOptReOpt

이미지 로고

ReOpt LogoReOpt

아이콘만 (텍스트 없음)

텍스트만 (아이콘/이미지 없음 → 첫 글자 fallback)

AAcme Corp

클릭 핸들러

테스트 커버리지

2026년 7월 9일9/9 통과
9성공
0실패
9전체
  • icon + text를 렌더링한다
  • src 이미지를 렌더링한다
  • href 설정 시 <a> 태그로 렌더링한다
  • href 미설정 시 <div>로 렌더링한다
  • text 없이 icon만 렌더링한다
  • size 변형에 따른 className을 적용한다
  • onClick 핸들러를 호출한다
  • 이미지 로드 실패 시 icon fallback을 표시한다
  • src/icon 없고 text만 있으면 첫 글자를 표시한다

Related components

Kbd

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

Indicator

StatCard

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

Indicator

CompositeZone

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

Indicator

Toolbar

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

Indicator

Badge

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

Indicator

Spinner

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

Indicator
PreviouscreateBlockNextDrawer

기본 사용

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

단일 키

EscEnterTabSpace

조합 키

Ctrl+Shift+P
⌘+K

연속 키 (순차 입력)

G HG GZ Z

기본 사용

총 매출₩12,450,000↑ +12.5%

트렌드 변형

방문자3,420↑ +8.2%
이탈률32.1%↓ -4.3%
전환율2.4%→ 0.0%

기본 사용 (2D 그리드)

A1
A2
A3
B1
B2
B3

포커스 순환 비활성화

1
2
3

기본 사용


포커스 순환

Variants

DefaultInfoSuccessWarningError

With Dot

DefaultInfoSuccessWarningError

Sizes

SmallMedium

Sizes

Small (16px)

Medium (24px)

Large (32px)

Colors