reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
PropertyExplorer
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

PropertyExplorer

Shell

Search grouped properties with visibility state and explicit editing actions owned by the caller.

display
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { PropertyExplorer } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

User

Event

PropertyExplorer

PropTypeDefaultDescription
groupsRequiredPropertyGroup[]—그룹별 속성 목록. 각 속성은 dataType과 hidden 상태를 포함 가능
onSelect(property: PropertyDef) => void—속성 선택
onEdit(property: PropertyDef) => void—행에 명시적인 편집 버튼을 표시하고 선택한 속성을 전달
classNamestring—추가 CSS 클래스
labelsPropertyExplorerLabels—검색·빈 상태·편집·숨김 문구

PropertyDef

PropTypeDefaultDescription
nameRequiredstring—속성 이름
typeRequiredstring—원본 스키마 타입
dataTypeFieldDataType—호출자가 이미 판정한 opt-ui 필드 타입
descriptionstring—속성 설명
exampleValuestring—예시 값
eventCountnumber—관측 이벤트 수
hiddenboolean—피커에서는 숨기되 탐색기에서는 흐리게 표시할 상태

컴포넌트 의존 관계

깊이
▼ USES (1)PropertyExplorerinput
View test results

테스트 커버리지

2026년 7월 9일2/2 통과
2성공
0실패
2전체
  • 프로퍼티를 렌더링한다
  • 검색 필터가 작동한다

Related components

opt-ui

FaqAccordion

Shells

Organize FAQ questions and answers with Composite and Disclosure components.

opt-ui

EnvPanel

Shells

Browse environment variables with collapsible environment groups and Composite navigation.

opt-ui

BranchSelect

Shells

Choose a Git branch with a wrapper around the Select primitive.

opt-ui

DesignGuidePanel

Shells

Consult six design-system reference sections covering primitives, keyboard patterns, Tailwind selectors, and accessibility attributes.

opt-ui

QuickActions

Shells

Present frequent actions in a grid or list with keyboard shortcut labels.

opt-ui

TeamMemberList

Shells

Show team members and online status in list, compact, or avatar-only layouts.

PreviousCodeSnippetViewerNextQueryResultsTable