reopt designreopt design
DocsExploreToolsPricingBuilder
Login
Explore/
opt-ui179opt-charts37opt-datagrid7opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
Overview179Core68Shells80Blocks31
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/Text

Text

Component

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

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

텍스트 역할과 톤

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

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

테스트 커버리지

2026년 7월 9일3/3 통과
3성공
0실패
3전체
  • renders a semantic text element with a tokenized visual role
  • supports label-specific props when rendering a label
  • keeps semantic heading level independent from visual hierarchy

Related components

FieldToken

필드 타입을 글리프 하나로 표현하는 토큰. 문자열·숫자·날짜·IP·지오 등 분석 스키마 타입마다 고정된 아이콘과 팔레트 슬롯을 부여해 필드 목록·컬럼 헤더·속성 테이블 전역에서 같은 어휘를 쓴다.

Facet

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

Expression

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

TextTruncate

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

Highlight

검색어에 해당하는 구간을 <mark>로 표시. 긴 항목 우선 매칭이라 겹치는 검색어도 조각나지 않는다.

LiveRegion

라이브 뷰의 변화를 스크린 리더에 읽어 주는 영역. 스로틀로 폭주를 요약하고 두 노드를 번갈아 써서 같은 문구도 다시 읽힌다.

PreviousKeyPadMenuNextHeading

스키마 컬럼 목록

  • event_nameVARCHAR
  • user_iduuid
  • occurred_atTIMESTAMP WITH TIME ZONE
  • revenueDECIMAL(12,2)
  • is_internalboolean
  • propertiesJSONB
  • referrerurl
  • client_ipinet
  • tagstext[]

전체 타입

stringnumberbooleandatedatetimedurationpercentcurrencyenumarrayobjectjsonipgeourlemailidbinaryaggregatenestedunknown

크기와 채우기

값 분포로 필터하기

선택: safari

표본이 전체보다 작을 때

Chrome48K61%
Safari19K24%
Edge6.1K7.8%

로딩과 빈 상태

Counting…
No values in this range.

알림 규칙

열린 절: 없음

상태

grouped overall eventsnotifySlack #alerts

컬럼 배치

생략 위치

endhttps://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country
starthttps://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country
middlehttps://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country
startEndhttps://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country

테이블 셀

트레이스경로
trace-9f2c1ad0-77be-4b21-a0d9-4c2f1e88b310-segment-014https://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country

검색어 강조

  • checkout_completed · plan=pro · country=KR
  • checkout_started · plan=free · country=US
  • signup_completed · source=organic · country=KR
  • page_view · path=/pricing · country=JP

검색어 여러 개

checkout_completed 이벤트가 KR 지역에서 12% 증가했고 US 지역에서는 3% 감소했습니다.

스트리밍 카운터

수신한 이벤트0

스크린 리더에는 4초마다 한 번만 요약해 읽어 줍니다. 일시정지하면 안내도 멈춥니다.