Stats Components

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Stats from Vista

Bootstrap

Vista

<section class="position-relative py-12 py-md-24 py-lg-32 bg-danger-dark">
  <div class="container">
    <div class="mw-sm mw-lg-4xl mw-xl-5xl mx-auto">
      <div class="row">
        <div class="col-lg-6 mb-12 mb-lg-0">
          <div class="position-relative mw-lg-sm ps-10">
            <div class="position-absolute top-0 start-0 px-1 h-100 bg-danger"></div><span class="d-block mb-5 fs-6">Customer’s revenue saved</span>
            <h2 class="lh-sm fw-semibold mb-0">$55,199,213.68</h2>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="position-relative mw-lg-sm ms-lg-auto ps-10">
            <div class="position-absolute top-0 start-0 px-1 h-100 bg-white bg-opacity-25"></div><span class="d-block mb-5 fs-6">Time saved managing finances</span>
            <h2 class="lh-sm fw-semibold mb-0">3,195 hours</h2>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Stats from Casper

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 ms-n32 mt-n32" src="casper-assets/blur/center-violet-blue.svg" alt=""/>
  <div class="container position-relative">
    <div class="mw-2xl mx-auto mb-16 text-center">
      <h3 class="font-heading fw-medium text-white mb-3">Achievements So far</h3>
      <p class="mw-lg mx-auto fs-6 text-light-light mb-0">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
    </div>
    <div class="mw-xs mx-auto mw-lg-none mx-auto">
      <div class="row">
        <div class="col-12 col-lg-4 mb-12 mb-lg-0">
          <div class="d-flex flex-column flex-sm-row pb-12 pb-lg-0 align-items-start align-items-lg-center justify-content-lg-center position-relative">
            <div class="d-none d-lg-block position-absolute top-0 end-0 h-100 bg-secondary-dark" style="width: 1px;"></div>
            <div class="d-block d-lg-none position-absolute bottom-0 start-0 w-100 bg-secondary-dark" style="height: 1px;"></div><img class="flex-shrink-0 img-fluid" src="casper-assets/stats/avatar-3.png" alt=""/>
            <div class="mt-6 mt-sm-0 ms-sm-8"><span class="h3 text-white mb-2">120</span><span class="d-block fs-6 text-light-light">Partners Joined</span></div>
          </div>
        </div>
        <div class="col-12 col-lg-4 mb-12 mb-lg-0">
          <div class="d-flex flex-column flex-sm-row pb-12 pb-lg-0 align-items-start align-items-lg-center justify-content-lg-center position-relative">
            <div class="d-none d-lg-block position-absolute top-0 end-0 h-100 bg-secondary-dark" style="width: 1px;"></div>
            <div class="d-block d-lg-none position-absolute bottom-0 start-0 w-100 bg-secondary-dark" style="height: 1px;"></div><img class="flex-shrink-0 img-fluid" src="casper-assets/stats/avatar-2.png" alt=""/>
            <div class="mt-6 mt-sm-0 ms-sm-8"><span class="h3 text-white mb-2">300+</span><span class="d-block fs-6 text-light-light">Projects Done</span></div>
          </div>
        </div>
        <div class="col-12 col-lg-4">
          <div class="d-flex flex-column flex-sm-row align-items-start align-items-lg-center justify-content-lg-center"><img class="flex-shrink-0 img-fluid" src="casper-assets/stats/avatar-1.png" alt=""/>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Stats from Plain 5

Bootstrap

Plain 5

<section class="py-5">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-md-6 col-lg-3 text-center mb-5 mb-lg-0">
        <svg class="mx-auto" width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="#3d8bfd"></path>
          <circle cx="24" cy="24" r="23.5" stroke="#6ea8fe"></circle>
        </svg>
        <h4 class="mt-3">600 000 000</h4>
        <p class="text-muted">Dolor sit amet consectutar</p>
      </div>
      <div class="col-12 col-md-6 col-lg-3 text-center mb-5 mb-lg-0">
        <svg class="mx-auto" width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="#3d8bfd"></path>
          <circle cx="24" cy="24" r="23.5" stroke="#6ea8fe"></circle>
        </svg>
        <h4 class="mt-3">600 000 000</h4>
        <p class="text-muted">Dolor sit amet consectutar</p>
      </div>
      <div class="col-12 col-md-6 col-lg-3 text-center mb-5 mb-md-0">
        <svg class="mx-auto" width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="#3d8bfd"></path>
          <circle cx="24" cy="24" r="23.5" stroke="#6ea8fe"></circle>
        </svg>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Stats from Sirius Dashboard

Bootstrap

Sirius Dashboard

<section class="py-6">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-8 mb-6 mb-lg-0">
        <div class="border rounded-2">
          <div class="pt-8 px-8 mb-8 border-bottom">
            <h6>Agents Stats</h6>
            <p class="mb-4">Lorem ipsum dolor sit amet consectutar</p>
            <div><a class="btn py-4 border-0 rounded-0 border-bottom border-2 border-primary fw-bold text-dark" href="#">Active Tab</a><a class="btn py-4 border-0 rounded-0" href="#">Inactive Tab</a><a class="btn py-4 border-0 rounded-0" href="#">Inactive Tab</a></div>
          </div>
          <div class="pb-8">
            <div class="table-responsive border border-bottom-0 border-start-0 border-end-0 mb-4">
              <table class="table">
                <thead>
                  <tr class="table-active text-uppercase align-middle">
                    <th scope="col">
                      <div class="d-inline-flex align-items-center">
                        <div class="form-check ms-4 me-4">
                          <input class="form-check-input" type="checkbox" value=""/>
                        </div><small>Authors</small>
                      </div>
                    </th>
                    <th scope="col"><small>Company</small></th>
                    <th scope="col"><small>Progress</small></th>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Stats from Sirius Dashboard

Tailwind CSS

Sirius Dashboard

<section class="py-6">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-4">
            <div class="w-full md:w-1/3 p-4">
                <div class="bg-white rounded-2xl p-8 border border-gray-200">
                    <div class="flex items-start justify-between mb-6">
                        <div class="w-10 h-10 rounded-2xl bg-purple-50 flex items-center justify-center">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M2.1946 11.4494C1.35561 10.0351 1.06179 8.36309 1.36831 6.74744C1.67483 5.1318 2.56061 3.68362 3.85932 2.67485C5.15803 1.66607 6.78032 1.1661 8.42158 1.2688C10.0628 1.37151 11.6101 2.06983 12.773 3.23264C13.9358 4.39545 14.6341 5.94275 14.7368 7.58401C14.8395 9.22526 14.3396 10.8476 13.3308 12.1463C12.322 13.445 10.8738 14.3308 9.25821 14.6373C7.64256 14.9438 5.97059 14.65 4.55624 13.811L4.55626 13.811L2.22397 14.4773C2.12747 14.5049 2.02536 14.5062 1.92821 14.481C1.83106 14.4558 1.74242 14.4051 1.67145 14.3342C1.60049 14.2632 1.5498 14.1745 1.52462 14.0774C1.49945 13.9803 1.50071 13.8781 1.52829 13.7816L2.19466 11.4494L2.1946 11.4494Z" stroke="#5F27CE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M5.75 6.59375H10.25" stroke="#5F27CE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M5.75 9.40625H10.25" stroke="#5F27CE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </div>
                        <span class="px-3 py-1 rounded-md bg-blue-50 text-blue-500 text-xs font-bold uppercase">30 days</span>
                    </div>
                    <h1 class="text-blue-900 mb-4 text-4xl font-semibold">1450</h1>
                    <div class="flex items-center gap-1">
                        <p class="text-gray-500 text-xs font-medium">Messages</p>
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="8" height="6" viewBox="0 0 8 6" fill="none">
                                <path d="M3.7252 5.86379C3.75743 5.90613 3.79898 5.94045 3.84662 5.96408C3.89427 5.98771 3.94671 6 3.99988 6C4.05304 6 4.10549 5.98771 4.15313 5.96408C4.20078 5.94045 4.24233 5.90613 4.27455 5.86379L7.94134 0.522754C7.97571 0.472634 7.99575 0.414068 7.99931 0.353377C8.00286 0.292686 7.9898 0.232175 7.96153 0.178373C7.93326 0.124571 7.89086 0.0795221 7.83889 0.0480871C7.78693 0.0166521 7.72738 2.47717e-05 7.66667 -2.91301e-08L0.333088 -6.70252e-07C0.272378 2.412e-05 0.212828 0.0166514 0.160863 0.0480864C0.108899 0.0795214 0.066494 0.124571 0.0382243 0.178373C0.00995448 0.232175 -0.00310657 0.292686 0.000451105 0.353377C0.00400878 0.414068 0.0240502 0.472633 0.0584121 0.522753L3.7252 5.86379Z" fill="#EB3838"></path>
                            </svg>
                        </span>
                        <p class="text-red-500 text-xs font-medium">20% less</p>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Three-Up Metric Stat Cards with 30-Day Badges

A row of three white bordered cards each showing a large numeric KPI (1450), an icon, a 30 DAYS badge, and a small trend label for messages or tasks with red down or green up change indicators. The layout is a horizontal row of equal-width cards used for summarizing analytics.

Stats generator

Stats from Dashboard

shadcn/ui

Dashboard

"use client"

import { Ellipsis } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Bar, BarChart, AreaChart, Area } from "recharts"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"

import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
} from "@/components/ui/chart"

import {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select"

import {