Object Number
Betav1.0.0수치 표현 — 값 + 단위/통화 + semantic 색 + 변동률을 한 묶음으로. SAP UI5 ObjectNumber 디자인 패턴 참고. 대시보드 stat 카드 / 표 / 객체 헤더 어디서나 같은 표현.
Loading…
import { ObjectNumber } from "@/components/ui/object-number";
// 통화 + 양수 + 변동률
<ObjectNumber
value={2450}
kind="currency"
state="positive"
trend="+20.1%"
/>
// 퍼센트
<ObjectNumber value={0.123} kind="percent" state="negative" />
// 단위 있는 일반 숫자
<ObjectNumber value={1234} unit="pcs" />
// Stat card — label + emphasized
<ObjectNumber
label="Revenue"
value={45231.89}
kind="currency"
state="positive"
emphasized
trend="+20.1%"
/>Installation
pnpm dlx shadcn@latest add https://groudit.com/r/object-number.jsonDependencies
설치 시 자동으로 함께 들어오는 의존성. 모든 버전은 정확히 고정되어 자동 업데이트를 방지합니다.
npm packages
| Package | Version |
|---|---|
| clsx | 2.1.1 |
| tailwind-merge | 3.6.0 |
Accessibility
Notes
- •tabular-nums 적용 — 세로 정렬 균일.
- •오른쪽 정렬 권장 (테이블 컬럼).
- •trend 가 색만으로 표시되지 않도록 부호 (+/-) 동반.