---
title: "Stat"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Stat for dashboards and KPI displays. Titles, values, trend indicators, and icon support for clear metric and analytics presentation."
url: https://frutjam.com/vi/components/stat
---

# Stat Component

Các thành phần thống kê hiển thị các số liệu chính và dữ liệu số ở định dạng rõ ràng, có tổ chức. Được xây dựng bằng HTML ngữ nghĩa và bố cục linh hoạt, số liệu thống kê truyền đạt các số liệu và phân tích kinh doanh quan trọng. Hệ thống thống kê Frutjam hỗ trợ nhiều cách sắp xếp và kiểu—lý tưởng cho trang tổng quan, báo cáo hiệu suất và tóm tắt dữ liệu.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

| Lớp học          | Kiểu            | Sự miêu tả                                         |
| ---------------- | --------------- | -------------------------------------------------- |
| stats            | Căn cứ          | Vùng chứa một hoặc nhiều mục chỉ số                |
| stat             | Công cụ sửa đổi | Mục thống kê riêng lẻ có tiêu đề, giá trị và mô tả |
| stat-title       | Công cụ sửa đổi | Nhãn phía trên giá trị chỉ số                      |
| stat-value       | Công cụ sửa đổi | Giá trị văn bản hoặc số chính lớn                  |
| stat-desc        | Công cụ sửa đổi | Mô tả bổ sung bên dưới giá trị                     |
| stat-figure      | Công cụ sửa đổi | Biểu tượng hoặc hình đại diện bên cạnh chỉ số      |
| stats-horizontal | Công cụ sửa đổi | Sắp xếp các mục chỉ số cạnh nhau (mặc định)        |
| stats-vertical   | Công cụ sửa đổi | Xếp chồng các mục chỉ số theo chiều dọc            |
| stat-primary     | Màu sắc         | Màu chủ đề chính cho giá trị chỉ số                |
| stat-secondary   | Màu sắc         | Màu chủ đề phụ cho giá trị chỉ số                  |
| stat-accent      | Màu sắc         | Màu chủ đề nhấn cho giá trị chỉ số                 |
| stat-neutral     | Màu sắc         | Màu chủ đề trung tính cho giá trị chỉ số           |
| stat-info        | Màu sắc         | Màu ngữ nghĩa thông tin cho giá trị chỉ số         |
| stat-success     | Màu sắc         | Màu ngữ nghĩa thành công cho giá trị chỉ số        |
| stat-warning     | Màu sắc         | Màu ngữ nghĩa cảnh báo cho giá trị chỉ số          |
| stat-error       | Màu sắc         | Lỗi ngữ nghĩa màu cho giá trị chỉ số               |

## Cách sử dụng cơ bản

## Nhiều số liệu thống kê

```html
<div class="stats shadow">
  <div class="stat place-items-center">
    <div class="stat-title">Total Page Views</div>
    <div class="stat-value">89,400</div>
    <div class="stat-desc">21% more than last month</div>
  </div>

  <div class="stat place-items-center">
    <div class="stat-title">Total Users</div>
    <div class="stat-value">4,200</div>
    <div class="stat-desc">↗︎ 400 (22%)</div>
  </div>

  <div class="stat place-items-center">
    <div class="stat-title">New Registers</div>
    <div class="stat-value">1,200</div>
    <div class="stat-desc">↗︎ 90 (14%)</div>
  </div>
</div>
```

## Thống kê có biểu tượng

```html
<div class="stats shadow">
  <div class="stat">
    <div class="stat-figure text-primary">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
    </div>
    <div class="stat-title">Page Views</div>
    <div class="stat-value text-primary">40.5K</div>
    <div class="stat-desc">↗︎ 21% from last month</div>
  </div>

  <div class="stat">
    <div class="stat-figure text-secondary">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
    </div>
    <div class="stat-title">Users</div>
    <div class="stat-value text-secondary">3,200</div>
    <div class="stat-desc">↗︎ 400 from last month</div>
  </div>
</div>
```

## Thống kê theo chiều ngang

```html
<div class="stats stats-horizontal shadow">
  <div class="stat">
    <div class="stat-title">Downloads</div>
    <div class="stat-value">31K</div>
    <div class="stat-desc">Jan 1st - Feb 1st</div>
  </div>

  <div class="stat">
    <div class="stat-title">New Users</div>
    <div class="stat-value">4,200</div>
    <div class="stat-desc">↗︎ 400 (22%)</div>
  </div>

  <div class="stat">
    <div class="stat-title">New Registers</div>
    <div class="stat-value">1,200</div>
    <div class="stat-desc">↗︎ 90 (14%)</div>
  </div>
</div>
```

## Thống kê dọc

```html
<div class="stats stats-vertical shadow">
  <div class="stat">
    <div class="stat-title">Downloads</div>
    <div class="stat-value">31K</div>
    <div class="stat-desc">Jan 1st - Feb 1st</div>
  </div>

  <div class="stat">
    <div class="stat-title">New Users</div>
    <div class="stat-value">4,200</div>
    <div class="stat-desc">↗︎ 400 (22%)</div>
  </div>

  <div class="stat">
    <div class="stat-title">New Registers</div>
    <div class="stat-value">1,200</div>
    <div class="stat-desc">↗︎ 90 (14%)</div>
  </div>
</div>
```

## Các biến thể màu

```html
<div class="stats shadow">
  <div class="stat stat-primary">
    <div class="stat-title">Primary</div>
    <div class="stat-value">12.4K</div>
    <div class="stat-desc">↗︎ 8% this week</div>
  </div>

  <div class="stat stat-secondary">
    <div class="stat-title">Secondary</div>
    <div class="stat-value">3,800</div>
    <div class="stat-desc">↗︎ 12% this week</div>
  </div>

  <div class="stat stat-accent">
    <div class="stat-title">Accent</div>
    <div class="stat-value">960</div>
    <div class="stat-desc">↗︎ 5% this week</div>
  </div>

  <div class="stat stat-neutral">
    <div class="stat-title">Neutral</div>
    <div class="stat-value">540</div>
    <div class="stat-desc">No change</div>
  </div>
</div>
```

## Các biến thể màu ngữ nghĩa

```html
<div class="stats shadow">
  <div class="stat stat-info">
    <div class="stat-title">Info</div>
    <div class="stat-value">1,024</div>
    <div class="stat-desc">Active sessions</div>
  </div>

  <div class="stat stat-success">
    <div class="stat-title">Success</div>
    <div class="stat-value">98.3%</div>
    <div class="stat-desc">Uptime this month</div>
  </div>

  <div class="stat stat-warning">
    <div class="stat-title">Warning</div>
    <div class="stat-value">42</div>
    <div class="stat-desc">Pending reviews</div>
  </div>

  <div class="stat stat-error">
    <div class="stat-title">Error</div>
    <div class="stat-value">7</div>
    <div class="stat-desc">Failed jobs today</div>
  </div>
</div>
```