Kaiko UI Kaiko UI

Stat

Stable

Display statistics and metrics in a structured format for dashboards and analytics interfaces.

API Reference

c-stat (container)

Attribute Description Type Default
color Background color theme string "100"
orientation Layout direction for stat items string "horizontal"
shadow Drop shadow intensity string "none"

Nested Components

Component Description Type Default
<div class="stat"> Individual stat item wrapper (raw HTML) — —
<div class="stat-title"> Stat label/title text (raw HTML) — —
c-stat.value Main metric display — accepts color slot —
<div class="stat-desc"> Supporting description text (raw HTML) — —
<div class="stat-figure shrink-0"> Icon or image container (raw HTML) — —
<div class="stat-actions"> Buttons or interactive elements (raw HTML) — —

color

primary secondary accent neutral info success warning error

orientation

horizontal vertical

shadow

none sm md lg xl 2xl

Accessibility

Landmark: wrap stat groups in a <section> with an aria-label so screen readers announce the region (e.g. "Key metrics").

Trend indicators: the arrow characters ↗︎ and ↘︎ used in descriptions may not be announced meaningfully. Supplement them with screen-reader-only text via class="sr-only" (e.g. <span class="sr-only">up</span>).

Color alone: do not rely solely on color to convey meaning. Pair colored values with descriptive text in <div class="stat-desc">.

Examples

Usage 


<c-stat shadow="lg">
  <div class="stat">
    <div class="stat-title">Total Page Views</div>
    <c-stat.value>89,400</c-stat.value>
    <div class="stat-desc">21% more than last month</div>
  </div>
</c-stat>

Basic Stats

Total Page Views
89,400
21% more than last month
New Users
4,200
↗︎ 400 (22%)
New Registers
1,200
↘︎ 90 (7%) 
<c-stat shadow="lg">
  <div class="stat">
    <div class="stat-title">Total Page Views</div>
    <c-stat.value>89,400</c-stat.value>
    <div class="stat-desc">21% more than last month</div>
  </div>

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

Colored Values

Revenue
$12,345
Above target
Active Users
2,450
Online now
Server Load
85%
High usage
Error Rate
3.2%
Needs attention 
<c-stat shadow="md">
  <div class="stat">
    <div class="stat-title">Revenue</div>
    <c-stat.value color="success">$12,345</c-stat.value>
    <div class="stat-desc">Above target</div>
  </div>

  <div class="stat">
    <div class="stat-title">Error Rate</div>
    <c-stat.value color="error">3.2%</c-stat.value>
    <div class="stat-desc">Needs attention</div>
  </div>
</c-stat>

Stats with Icons

Downloads
31K
Jan 1st - Feb 1st
New Users
4,200
↗︎ 400 (22%)
Favorites
1,025
21 today 
{% load kaiko_ui %}

<c-stat shadow="lg">
  <div class="stat">
    <div class="stat-figure shrink-0 text-primary">
      <c-icon name="trending-up" size="2rem" />
    </div>
    <div class="stat-title">Downloads</div>
    <c-stat.value>31K</c-stat.value>
    <div class="stat-desc">Jan 1st - Feb 1st</div>
  </div>
</c-stat>

Vertical Layout

Downloads
31K
Jan 1st - Feb 1st
New Users
4,200
↗︎ 400 (22%)
New Registers
1,200
↘︎ 90 (7%) 
<c-stat orientation="vertical" shadow="md">
  <div class="stat">
    <div class="stat-title">Downloads</div>
    <c-stat.value>31K</c-stat.value>
    <div class="stat-desc">Jan 1st - Feb 1st</div>
  </div>

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

Stats with Actions

Account Balance
$5,400
Available funds
Current Tasks
12
8 completed today 
<c-stat shadow="lg">
  <div class="stat">
    <div class="stat-title">Account Balance</div>
    <c-stat.value color="primary">$5,400</c-stat.value>
    <div class="stat-desc">Available funds</div>
    <div class="stat-actions">
      <c-button size="xs" color="primary">Withdraw</c-button>
    </div>
  </div>
</c-stat>

Colored Background

Total Sales
$45,231
This month
Conversion Rate
12.5%
Above average
Orders Completed
892
Target achieved
Pending Reviews
24
Awaiting attention 
<c-stat color="primary" shadow="lg">
  <div class="stat">
    <div class="stat-title">Total Sales</div>
    <c-stat.value>$45,231</c-stat.value>
    <div class="stat-desc">This month</div>
  </div>
</c-stat>

<c-stat color="success" shadow="lg">
  <div class="stat">
    <div class="stat-title">Orders Completed</div>
    <c-stat.value>892</c-stat.value>
    <div class="stat-desc">Target achieved</div>
  </div>
</c-stat>

Single Stat with Figure

Total Revenue
$89,400
January 1st - February 1st 
{% load kaiko_ui %}

<c-stat shadow="xl">
  <div class="stat place-items-center">
    <div class="stat-figure shrink-0 text-secondary">
      <c-icon name="activity" size="3rem" />
    </div>
    <div class="stat-title">Total Revenue</div>
    <c-stat.value color="secondary">$89,400</c-stat.value>
    <div class="stat-desc">January 1st - February 1st</div>
  </div>
</c-stat>