V2? Coming soon! New components and lots of improvements.

Powerful suite of Blade components for TALL Stack apps.

Stats

>= 1.20

Stats components.

30

50

100

<!-- Single -->
<x-stats :number="30" />
 
<!-- Multiple -->
<div class="grid grid-cols-3 gap-2">
<x-stats :number="30" />
<x-stats :number="50" />
<x-stats :number="100" />
</div>

Components

100

<x-stats title="Components" :number="100" />

100

100

100

<x-stats icon="swatch" :number="100" />
<x-stats icon="swatch" :number="100" light />
<x-stats icon="swatch" :number="100" outline />

Components

100

Components

100

Components

100

Components

100

Components

100

Components

100

Components

100

Components

100

Components

100

Components

100

Components

100

Components

100

Components

100

Components

100

Components

100

Components

100

Components

100

Components

100

Components

100

Components

100

Components

100

Components

100

Components

100

Components

100

Components

100

Components

100

The color is only applied to the icon and its style.

<!-- The color is only applied to the icon and its style.-->
 
<x-stats :number="100" />
<x-stats :number="100" color="secondary" />
<x-stats :number="100" color="slate" />
<x-stats :number="100" color="gray" />
<x-stats :number="100" color="zinc" />
<x-stats :number="100" color="neutral" />
<x-stats :number="100" color="stone" />
<x-stats :number="100" color="red" />
<x-stats :number="100" color="orange" />
<x-stats :number="100" color="amber" />
<x-stats :number="100" color="yellow" />
<x-stats :number="100" color="lime" />
<x-stats :number="100" color="green" />
<x-stats :number="100" color="emerald" />
<x-stats :number="100" color="teal" />
<x-stats :number="100" color="cyan" />
<x-stats :number="100" color="sky" />
<x-stats :number="100" color="blue" />
<x-stats :number="100" color="indigo" />
<x-stats :number="100" color="violet" />
<x-stats :number="100" color="purple" />
<x-stats :number="100" color="fuchsia" />
<x-stats :number="100" color="pink" />
<x-stats :number="100" color="rose" />
<x-stats :number="100" color="black" />
<x-stats :number="100" color="white" />

50

100

<x-stats :number="50" increase />
<x-stats :number="100" decrease />
 
<!-- These parameters are boolean, so you can do:-->
@php($status = 2 > 1)
 
<x-stats :number="50"
:increase="$status"
:decrease="$status" />

25

50

75

100

The animation will happen every time the component enters the viewport.

<x-stats :number="25" animated />

U$ 25,00

U$ 50,00

U$ 75,00

U$ 100,00

The animated effect doesn't work when using a custom number format.

<x-stats number="U$ 25,00" />

TallStackUI

50

The best TALL Stack component library

<!-- Default Styles -->
<x-stats :number="50" header="TallStackUI" footer="The best TALL Stack component library">
<x-slot:right>
<x-icon name="wrench-screwdriver" class="w-6 h-6 text-pink-500" />
</x-slot:right>
</x-stats>
 
<!-- or -->
 
<!-- Raw Content -->
<x-stats :number="50">
<x-slot:header>
TallStackUI
</x-slot:header>
<x-slot:right>
<x-icon name="wrench-screwdriver" class="w-6 h-6 text-pink-500" />
</x-slot:right>
<x-slot:footer>
The best TALL Stack component library
</x-slot:footer>
</x-stats>

Code highlighting provided by Torchlight