daisyUI Kit 🌼

Stat

The Stat components make data look fabulous.

Total Page Views
89,400
10% more than last month
Code Example 
<Stats class="shadow">
  <Stat>
    <StatTitle>Total Page Views</StatTitle>
    <StatValue>89,400</StatValue>
    <StatDesc>10% more than last month</StatDesc>
  </Stat>
</Stats>

Components

The Stat components include the following list. None of the component have any props. They can be styled using TailwindCSS classes.

Stats

The Stats component is the parent element that groups stat blocks together.

Stat

Stat is the wrapper for a single stat.

StatTitle

StatTitle contains the title.

StatValue

StatValue holds the featured value.

StatDesc

StatDesc holds the description.

StatFigure

StatFigure holds an icon or image.

StatActions

StatActions is the place to put buttons or other actions.

With Icons

Total Likes
25.6K
21% more than last month
Page Views
2.6M
21% more than last month
86%
Tasks done
31 tasks remaining
Code Example 
<Stats class="shadow">
  <Stat>
    <StatFigure class="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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
    </StatFigure>
    <StatTitle>
      Total Likes
    </StatTitle>
    <StatValue class="text-primary">
      25.6K
    </StatValue>
    <StatDesc>
      21% more than last month
    </StatDesc>
  </Stat>

  <Stat>
    <StatFigure class="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="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
    </StatFigure>
    <StatTitle>
      Page Views
    </StatTitle>
    <StatValue class="text-secondary">
      2.6M
    </StatValue>
    <StatDesc>
      21% more than last month
    </StatDesc>
  </Stat>

  <Stat>
    <StatFigure class="stat-figure text-secondary">
      <Avatar class="w-16" online>
        <img src="/img/unsplash-forest-sm.jpg">
      </Avatar>
    </StatFigure>
    <StatValue>
      86%
    </StatValue>
    <StatTitle>
      Tasks done
    </StatTitle>
    <StatDesc class="text-secondary">
      31 tasks remaining
    </StatDesc>
  </Stat>
</Stats>

Stats with Colored Icons

Downloads
31K
Jan 1st - Feb 1st
New Users
4,200
↗︎ 400 (22%)
New Registers
1,200
↘︎ 90 (14%)
Code Example 
<Stats class="shadow">
  <Stat>
    <StatFigure class="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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
    </StatFigure>
    <StatTitle>
      Downloads
    </StatTitle>
    <StatValue>
      31K
    </StatValue>
    <StatDesc>
      Jan 1st - Feb 1st
    </StatDesc>
  </Stat>

  <Stat>
    <StatFigure class="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" /></svg>
    </StatFigure>
    <StatTitle>
      New Users
    </StatTitle>
    <StatValue>
      4,200
    </StatValue>
    <StatDesc>
      ↗︎ 400 (22%)
    </StatDesc>
  </Stat>

  <Stat>
    <StatFigure class="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="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" /></svg>
    </StatFigure>
    <StatTitle>
      New Registers
    </StatTitle>
    <StatValue>
      1,200
    </StatValue>
    <StatDesc>
      ↘︎ 90 (14%)
    </StatDesc>
  </Stat>
</Stats>

Example With Buttons

Account balance
$89,400
Current balance
$89,400
Code Example 
<Stats class="bg-primary text-primary-content">
  <Stat>
    <StatTitle>
      Account balance
    </StatTitle>
    <StatValue>
      $89,400
    </StatValue>
    <StatActions>
      <Button sm success>
        Add funds
      </Button>
    </StatActions>
  </Stat>

  <Stat>
    <StatTitle>
      Current balance
    </StatTitle>
    <StatValue>
      $89,400
    </StatValue>
    <StatActions>
      <Button sm>
        Withdrawal
      </Button>
      <Button sm>
        deposit
      </Button>
    </StatActions>
  </Stat>
</Stats>