Przejdź do głównej treści
Frutjam logo Frutjam
v2.2.2
Theme

Stat Component

CSS-only Tailwind CSS stat for displaying metrics. Value, label, description, and icon slots. Responsive grid layout. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Komponenty statystyczne wyświetlają kluczowe metryki i dane liczbowe w przejrzystym, zorganizowanym formacie. Statystyki, zbudowane w oparciu o semantyczny kod HTML i elastyczne układy, przekazują ważne wskaźniki biznesowe i analizy. System statystyk Frutjam obsługuje wiele układów i stylów — idealnie nadaje się do pulpitów nawigacyjnych, raportów wydajności i podsumowań danych.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Klasa Typ Opis
statsOpieraćPojemnik na jeden lub więcej elementów statystyk
statModyfikatorIndywidualny element statystyki z tytułem, wartością i opisem
stat-titleModyfikatorEtykieta nad wartością statystyki
stat-valueModyfikatorDuża podstawowa wartość liczbowa lub tekstowa
stat-descModyfikatorOpis uzupełniający pod wartością
stat-figureModyfikatorIkona lub awatar obok statystyk
stats-horizontalModyfikatorUkłada elementy statystyk obok siebie (domyślnie)
stats-verticalModyfikatorUkłada elementy statystyk pionowo
stat-primaryKolorPodstawowy kolor motywu wartości statystyki
stat-secondaryKolorDodatkowy kolor motywu wartości statystyki
stat-accentKolorKolor motywu akcentującego wartość statystyki
stat-neutralKolorNeutralny kolor motywu dla wartości statystyki
stat-infoKolorKolor semantyczny informacji dla wartości statystyki
stat-successKolorKolor semantyczny sukcesu dla wartości statystyki
stat-warningKolorKolor semantyczny ostrzeżenia dla wartości statystyki
stat-errorKolorBłąd koloru semantycznego dla wartości statystyki

Podstawowe użycie

Downloads
31K
From January 1st to February 1st
1
2
3
4
5
<div class="stat place-items-center">
  <div class="stat-title">Downloads</div>
  <div class="stat-value">31K</div>
  <div class="stat-desc">From January 1st to February 1st</div>
</div>

1
2
3
4
5
<div className="stat place-items-center">
  <div className="stat-title">Downloads</div>
  <div className="stat-value">31K</div>
  <div className="stat-desc">From January 1st to February 1st</div>
</div>

Wiele statystyk

Total Page Views
89,400
21% more than last month
Total Users
4,200
↗︎ 400 (22%)
New Registers
1,200
↗︎ 90 (14%)
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<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>

Statystyki z ikonami

Page Views
40.5K
↗︎ 21% from last month
Users
3,200
↗︎ 400 from last month
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<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>

Statystyki poziome

Downloads
31K
Jan 1st - Feb 1st
New Users
4,200
↗︎ 400 (22%)
New Registers
1,200
↗︎ 90 (14%)
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<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>

Statystyki pionowe

Downloads
31K
Jan 1st - Feb 1st
New Users
4,200
↗︎ 400 (22%)
New Registers
1,200
↗︎ 90 (14%)
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<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>

Warianty kolorów

Primary
12.4K
↗︎ 8% this week
Secondary
3,800
↗︎ 12% this week
Accent
960
↗︎ 5% this week
Neutral
540
No change
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>

Semantyczne warianty kolorów

Info
1,024
Active sessions
Success
98.3%
Uptime this month
Warning
42
Pending reviews
Error
7
Failed jobs today
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>