Stat

KPI-плашка — подпись, значение, дельта с тоном и подсказка.

Выручка₽1,24М+12,4%за месяц

Активные3 480−2,1%за неделю

Конверсия4,7%0,0%без изменений

Запросов128

Навыков12

Коннекторов7

import { Stat } from "@/components/ui/stat";

export default function Particle() {
  return (
    <div className="flex w-full max-w-2xl flex-col gap-6">
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
        <Stat
          delta="+12,4%"
          deltaTone="up"
          hint="за месяц"
          label="Выручка"
          value="₽1,24М"
        />
        <Stat
          delta="−2,1%"
          deltaTone="down"
          hint="за неделю"
          label="Активные"
          value="3 480"
        />
        <Stat
          delta="0,0%"
          deltaTone="neutral"
          hint="без изменений"
          label="Конверсия"
          value="4,7%"
        />
      </div>
      <div className="grid grid-cols-3 gap-6 px-1">
        <Stat label="Запросов" value="128" variant="plain" />
        <Stat label="Навыков" value="12" variant="plain" />
        <Stat label="Коннекторов" value="7" variant="plain" />
      </div>
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/stat

Использование

import { Stat } from "@/components/ui/stat"

<Stat label="Выручка" value="₽1,24М" delta="+12,4%" deltaTone="up" hint="за месяц" />

Stat — презентационная KPI-плашка: подпись (uppercase, приглушённая) + крупное значение (tabular-nums) + опциональная дельта с тоном (up → success, down → destructive, neutral → muted) и подсказка. variant="card" рисует рамку на фоне карточки, variant="plain" — без рамки (типографская колонка).

Справочник API

Stat

Свойство	Тип	По умолчанию
`label`	`string`	—
`value`	`string \| number`	—
`delta`	`string`	—
`deltaTone`	`"up" \| "down" \| "neutral"`	`"neutral"`
`hint`	`string`	—
`variant`	`"card" \| "plain"`	`"card"`
`className`	`string`	—

На этой странице

Установка Использование Справочник API Stat