AI-Native

TokenUsageBar

컨텍스트 사용량 progress bar — 임계점 자동 컬러 전환.

warnAt(기본 75%), dangerAt(기본 90%)을 넘으면 색상이 brand → warning → danger로 자동 전환. 숫자 포맷도 K/M 자동.

import { TokenUsageBar } from "@nxtgen-org/react";

Threshold colors

정상 / 경고 / 위험

컨텍스트 사용량48.0K / 200.0K(24%)

컨텍스트 사용량170.0K / 200.0K(85%)

컨텍스트 사용량195.0K / 200.0K(98%)

tsx

1<TokenUsageBar used={48000}  total={200000} />  // 정상 (brand)
2<TokenUsageBar used={170000} total={200000} />  // 경고 (warning, 75%~)
3<TokenUsageBar used={195000} total={200000} />  // 위험 (danger, 90%~)

Compact

얇은 변형

컨텍스트 사용량120.0K / 200.0K(60%)

tsx

1<TokenUsageBar used={120000} total={200000} compact />

API

Name	Type	Default	Description
used*	number	—	—
total*	number	—	—
warnAt	number (0~1)	0.75	—
dangerAt	number (0~1)	0.9	—
compact	boolean	—	얇은 변형 (h-1).
label	string	—	기본 '{used} / {total}'.