Two Layouts
Row (horizontal) or grid (responsive) display
Stats Component - Let Numbers Do the Talking
Numbers tell stories. Show your impact with clean, professional stat displays. Choose row or grid layout, add prefixes and suffixes, and watch trust build.
Two Layout Options
The Stats component displays key metrics with optional headings. Choose row layout for horizontal display or grid for responsive wrapping.
Row Layout (Horizontal)
Best for: 3-4 stats, hero sections, homepage
Stats display in a horizontal row on desktop, stacking on mobile.
Our Impact in Numbers
- Happy Clients
- 500 +
- Happy Clients
- Satisfaction Rate
- 98 %
- Satisfaction Rate
- Projects Completed
- 15 K+
- Projects Completed
- Revenue Generated
- $ 2 M
- Revenue Generated
Show Code
<Stats
heading="Our Impact in Numbers"
stats=[object Object][object Object][object Object][object Object]
layout="row"
/>Grid Layout (Responsive)
Best for: 3-6 stats, about pages, landing pages
Stats display in a responsive grid that adapts to screen size.
Why Businesses Choose Us
- Years Experience
- 10 +
- Years Experience
- Team Members
- 50 +
- Team Members
- Users Served
- 25 K
- Users Served
Show Code
<Stats
heading="Why Businesses Choose Us"
stats=[object Object][object Object][object Object]
layout="grid"
/>Number Formatting
Prefix & Suffix Examples
Suffix:
suffix: '+'→ 500+suffix: '%'→ 98%suffix: 'K'→ 15Ksuffix: 'M'→ 2Msuffix: 'K+'→ 25K+
Prefix:
prefix: '$'→ $2Mprefix: '€'→ €500prefix: '#'→ #1
Stats Component Features
Prefix/Suffix
Format with $, +, %, K, M, etc.
Dark Mode
Full dark mode support built-in
Responsive
Adapts to all screen sizes
Add Stats to Your Pages
Show your achievements and build trust with impressive numbers.