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

StepBuilder

Component

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

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

Funnel Steps

Conversion Funnel
1
2
3

3 steps defined

컴포넌트 의존 관계

깊이
▲ USED BY (1)funnel-analysisStepBuilder

테스트 커버리지

2026년 7월 9일5/5 통과
5성공
0실패
5전체
  • 단계를 렌더링한다
  • label을 렌더링한다
  • Add step 버튼이 동작한다
  • 같은 tick에서 단계를 연속 추가해도 고유한 id를 만든다
  • 단계 삭제 버튼이 동작한다

Related components

ConditionBuilder

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

Trigger

Form

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

FormTrigger

Text

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

Heading

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

Kbd

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

Indicator

Separator

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

PreviousIconPickerNextConditionBuilder

Segment Conditions

User Segment
Matchof the following
and

1 group(s), 2 condition(s)

기본 사용

회사 이메일을 입력해주세요.

FormGroup — 필드 시맨틱 그룹핑

개인 정보
직무 정보

FormField + FormControl + FormDescription

영문, 숫자, 하이픈만 사용 가능합니다.

최대 200자까지 입력할 수 있습니다.

FormCheckbox + FormRadioGroup — Form Store 바인딩

구독 설정
요금제 선택

FormPush + FormRemove — 동적 배열 필드

태그 목록

태그를 추가하거나 제거할 수 있습니다.

FormProvider — Context 기반 폼 공유

프로필 설정 — Textarea + Switch

마케팅 알림 수신

FormSelect — 드롭다운 선택

종합 — 회원가입 폼

계정 정보

영문, 숫자를 포함하여 8자 이상 입력해주세요.

역할
보유 기술

보유한 기술 스택을 입력해주세요.

텍스트 역할과 톤

본문은 body 역할의 semantic token을 사용합니다.

레이블 텍스트보조 설명 텍스트npm install @reopt-ai/opt-ui

Heading 의미와 시각적 계층

Display 스타일, h4 의미

섹션 스타일, h5 의미
중첩 스타일, h6 의미

기본 사용

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

단일 키

EscEnterTabSpace

조합 키

Ctrl+Shift+P
⌘+K

연속 키 (순차 입력)

G HG GZ Z

가로 구분선

위 콘텐츠

아래 콘텐츠

라벨 구분선

또는

세로 구분선

프로필
설정
로그아웃