reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
opt-charts40
MetricsCard
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

MetricsCard

Chart

Pair a key metric with a Sparkline to show its value and trend together.

analytics
Related docs
bun add @reopt-ai/opt-charts
Install and import
bash
bun add @reopt-ai/opt-charts
tsx
import { MetricsCard } from "@reopt-ai/opt-charts";

Live preview

Change the width and theme, then interact with the components.

100%

Basic Usage

Total Revenue$45,231↑ up +12.5%
Expenses$12,345↓ down -8.2%
Active Users1,234unchanged +0.5%

Without Sparkline

Total Orders1,234↑ up +23 today
Pending Tasks12↓ down -3 from yesterday
Team Members8

Trend Variants

All Trends

Up Trend$10,000↑ up +15%
Down Trend$5,000↓ down -10%
Neutral$7,500unchanged +0.1%

MetricsCard

PropTypeDefaultDescription
titleRequiredstring—지표 제목
valueRequiredstring | number—지표 값
changestring—변화량 텍스트 (예: '+12.5%')
trendTrendDirection"neutral"트렌드 방향. 델타 배지에 상태색 + 화살표 + 숨김 텍스트(up/down)로 표시된다
invertTrendbooleanfalse내려가는 게 좋은 지표(에러율·이탈·지연). 화살표는 그대로, 색의 판정만 뒤집는다
sparklineDatanumber[]—Sparkline 데이터 배열. 스파크라인은 트렌드와 무관하게 1번 슬롯의 선으로 그린다
sparklinePropsOmit<SparklineProps, 'data'>—Sparkline 추가 props
labelsMetricsCardLabels—방향 낱말(up/down/neutral)과 스파크라인 접근성 이름. 지역화 지점
classNamestring—루트 요소에 붙는 CSS 클래스
valueClassNamestring—지표 값 요소에만 붙는 CSS 클래스
aria-labelstring—스크린 리더용 레이블

컴포넌트 의존 관계

깊이
▼ USES (1)MetricsCardsparkline
View test results

테스트 커버리지

2026년 7월 9일3/3 통과
3성공
0실패
3전체
  • 제목과 값을 렌더링한다
  • change와 trend를 표시한다
  • article role과 aria-label을 가진다

Related components

opt-charts

Sparkline

Charts

Show compact inline trends in stat cards, table cells, and other small spaces.

opt-charts

RetentionHeatmap

Charts

Compare cohort retention using color intensity in a heatmap.

opt-charts

TrendChart

Charts

Combine a Card and AreaChart with the title and description linked to the chart's accessible name.

opt-charts

ReportWidget

Charts

Render report data as line, bar, area, pie, scatter, gauge, funnel, sparkline, or metric widgets.

opt-charts

ChartContainer

Charts

Wrap Recharts ResponsiveContainer with accessible attributes and consistent chart styling.

opt-charts

ChartTooltip

Charts

Style Recharts tooltips with tooltip semantics and hidden decorative markers through the content prop.

PreviousVennDiagramNextTrendChart