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

StepBuilder

Component

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

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

Funnel Steps

Conversion Funnel
1
2
3

3 steps defined

StepBuilder

PropTypeDefaultDescription
steps*StepDef[]—단계 배열 ({ id, label, description? })
onChange*(steps: StepDef[]) => void—단계 변경 핸들러
labelstring—빌더 레이블
maxStepsnumber—최대 단계 수

컴포넌트 의존 관계

깊이
▲ USED BY (1)funnel-analysisStepBuilder
View test results

테스트 커버리지

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

Blocks that use this component

FunnelAnalysis

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

Analytics

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

FieldToken

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

Facet

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

Expression

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

TextTruncate

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

PreviousIconPickerNextConditionBuilder