지표 카드
안정primitive대시보드에서 수치 하나를 크게 강조해 보여주는 카드입니다.
@tissue-ui/layout-react설치
bash
npm install @tissue-ui/layout-reacttsx
import { MetricCard } from "@tissue-ui/layout-react";언제 쓰나
- 대시보드에서 핵심 수치 하나를 강조해 보여줄 때.
예제
지표 행
총 매출₩12,400,000전월 대비 +12%
활성 사용자1,284주간
보조 설명 없이
hint 를 생략하면 이름과 값만 크게 보여줍니다.
대기 중7
완료128
증감 배지와 함께
hint 자리에 배지를 넣어 증감을 색으로 강조합니다.
이번 달 매출₩3.2M+8%
이탈률2.1%+0.3%p
속성
| 속성 | 타입 | 설명 |
|---|---|---|
| label | string | 지표 이름입니다. |
| value | string | 지표 값입니다. |
| hint | string | 값 아래 짧은 설명입니다 (선택). |
위 옵션 말고도 className·onClick 같은 일반 HTML 속성을 그대로 넘길 수 있습니다.
상태
default
이 페이지의 옵션·상태는 실제 코드 정의에서 그대로 가져온 것입니다. 에이전트는 같은 내용을 llms.txt 로 읽습니다.