Statisticdata-display

KPI figure with locale-formatted value, unit, tone-aware delta, comparison caption, loading skeleton and sparkline slot.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/statistic

의존 아이템locale skeleton style

Default

Revenue

₩1,284,500+12%vs last month

Occupancy

78.4%-3%vs last week

Cancellations

42bookings+20%

statistic-demo.tsx

import { Statistic } from "@/components/ui/statistic";
export default function StatisticDemo() {  return (    <div className="grid gap-6 sm:grid-cols-3">      <Statistic label="Revenue" value={1284500} format="currency" delta={0.124} comparison="vs last month" />      <Statistic label="Occupancy" value={0.784} format="percent" fractionDigits={1} delta={-0.032} comparison="vs last week" />      <Statistic label="Cancellations" value={42} delta={0.2} higherIsBetter={false} suffix="bookings" />    </div>  );}