Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Stat-Komponente

Zuletzt aktualisiert:

Nur CSS-Tailwind-CSS-Statistik zum Anzeigen von Metriken. Wert-, Beschriftungs-, Beschreibungs- und Symbol-Slots. Responsives Rasterlayout. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Statistikkomponenten zeigen wichtige Kennzahlen und numerische Daten in einem klaren, organisierten Format an. Mit semantischem HTML und flexiblen Layouts erstellte Statistiken vermitteln wichtige Geschäftskennzahlen und Analysen. Das Frutjam-Statistiksystem unterstützt mehrere Anordnungen und Stile – ideal für Dashboards, Leistungsberichte und Datenzusammenfassungen.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Klasse Typ Beschreibung
statsBaseContainer für ein oder mehrere Statistikelemente
statModifikatorEinzelnes Statistikelement mit Titel, Wert und Beschreibung
stat-titleModifikatorBeschriftung über dem Statistikwert
stat-valueModifikatorGroßer primärer numerischer oder Textwert
stat-descModifikatorErgänzende Beschreibung unterhalb des Wertes
stat-figureModifikatorSymbol oder Avatar neben der Statistik
stats-horizontalModifikatorOrdnet Statistikelemente nebeneinander an (Standard)
stats-verticalModifikatorStapelt Statistikelemente vertikal
stat-primaryFarbePrimäre Designfarbe für den Statistikwert
stat-secondaryFarbeSekundäre Designfarbe für den Statistikwert
stat-accentFarbeAkzentfarbe des Themas für den Statistikwert
stat-neutralFarbeNeutrale Themenfarbe für den Statistikwert
stat-infoFarbeSemantische Infofarbe für den Statistikwert
stat-successFarbeErfolgssemantische Farbe für den Statistikwert
stat-warningFarbeSemantische Warnungsfarbe für den Statistikwert
stat-errorFarbeSemantische Fehlerfarbe für den Statistikwert

Grundlegende Verwendung

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>

Mehrere Statistiken

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>

Statistiken mit Symbolen

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>

Horizontale Statistiken

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>

Vertikale Statistiken

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>

Farbvarianten

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>

Semantische Farbvarianten

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>

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Stat-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP