본문, 레이블, 보조 설명, 코드에 일관된 의미 기반 타이포그래피를 적용합니다.
bun add @reopt-ai/opt-ui
본문은 body 역할의 semantic token을 사용합니다.
npm install @reopt-ai/opt-ui
문서의 의미 계층과 시각적 타이포그래피 계층을 독립적으로 제어합니다.
콘텐츠를 구분하는 가로/세로 디바이더. 라벨을 넣으면 가운데 정렬 구분선이 된다.
일회용 코드(OTP)/PIN 입력. 셀 단위 입력, 붙여넣기 분배, 자동 포커스 이동, 백스페이스 네비게이션과 폼 이름/오류 연결을 지원합니다.
눌림(pressed) 두 상태 버튼. 단독 사용하거나 ToggleGroup으로 묶어 단일/다중 선택을 만든다.
수직으로 쌓인 펼침/접힘 패널. single(한 개)/multiple(여러 개) 모드와 collapsible 지원.
범위 내 스칼라 측정값 게이지 (디스크 사용량·점수·용량 등). role=meter로 작업 진행률(Progress)과 구분된다.
위 콘텐츠
아래 콘텐츠
입력: (없음)
상태: 꺼짐
선택: left
선택: bold