Показатели

Stats рендерит нативный dl, а каждый StatItem — dt/dd с заголовком, значением, описанием и взаимоисключающими icon/chart на уровне TypeScript. Сетка адаптируется без горизонтального скролла, поддерживает состояния загрузки и отсутствия значения, а данные группы связаны стабильным id, не зависящим от позиции.

Пример

Интерактивный пример

Активные доски: 24; Создано за текущий период
Участники команды: 18; Во всех проектах
Доля выполнения: 87%; Задачи, закрытые в срок

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

Импортируйте компонент из публичной точки входа пакета.

import { Stats } from "denjs-ui";
import { Folder, Users } from "lucide-react";

export function Example() {
  return (
    <Stats
      items={[
        { id: "boards", title: "Active boards", value: 24, icon: <Folder aria-hidden="true" /> },
        { id: "members", title: "Team members", value: 18, icon: <Users aria-hidden="true" /> },
      ]}
    />
  );
}