Stats Section

The Stats Section is a versatile component for showcasing key metrics, accomplishments, or any numerical data in an elegant grid layout. It's designed to highlight important statistics with clear visual hierarchy, making them stand out on your landing page.

150+apps: Over 150 apps successfully delivered.

9members: Our core team consists of 9 experts.

300+devs: We collaborate with 300+ creative devs.

5+awards: Recognized with 5+ awards and featured in industry publications.

10+years experience: Bringing 10+ years of design experience to every project.

$25B+revenue: Our work has contributed to over $25 billion in revenue.

Usage

Import the component:

import { LandingStatsSection } from '@/components/landing/stats/LandingStatsSection';

Basic implementation:

<LandingStatsSection
  stats={[
    { value: '150+', label: 'apps', description: 'Over 150 apps successfully delivered.' },
    { value: '9', label: 'members', description: 'Our core team consists of 9 experts.' },
    { value: '300+', label: 'devs', description: 'We collaborate with 300+ creative devs.' }
  ]}
/>

Examples

With Title and Description

Our Achievements

We take pride in our accomplishments and the impact we've made across various apps and industries.

150+apps: Over 150 apps successfully delivered.

9members: Our core team consists of 9 experts.

300+devs: We collaborate with 300+ creative devs.

Without Borders

150+: Over 150 apps successfully delivered.

9members: Our core team consists of 9 experts.

300+devs: We collaborate with 300+ creative devs.

With Background

150+apps: Over 150 apps successfully delivered.

9members: Our core team consists of 9 experts.

300+devs: We collaborate with 300+ creative devs.

5+awards: Recognized with 5+ awards and featured in industry publications.

With Background Glow

150+apps: Over 150 apps successfully delivered.

9members: Our core team consists of 9 experts.

300+devs: We collaborate with 300+ creative devs.

5+awards: Recognized with 5+ awards and featured in industry publications.

Different Column Layouts

It's possible to use different column layouts for desktop and mobile screens. For example, you can use 4 columns on desktop and 1 column on mobile.

15+apps: Projects delivered in the last 12 months.

9people: That are part of our team.

30+devs: Developers that we work with.

5+prizes: Industry prizes since 2010.

Individual Stat Items

You can also use LandingStatItem directly for more control:

150+apps: Over 150 apps successfully delivered.

9members: Our core team consists of 9 experts.

300+devs: We collaborate with 300+ creative devs.

API Reference

LandingStatsSection Props

Prop Name	Prop Type	Required	Default
stats	`Array<{ value: string; label?: string; description: string }>`	Yes	`[]`
className	`string`	No	`''`
innerClassName	`string`	No	`''`
title	`string`	No	`undefined`
titleComponent	`React.ReactNode`	No	`undefined`
description	`string \| React.ReactNode`	No	`undefined`
descriptionComponent	`React.ReactNode`	No	`undefined`
variant	`'primary' \| 'secondary'` \| `'default'`	No	`'default'`
withBackground	`boolean`	No	`false`
withBackgroundGlow	`boolean`	No	`false`
backgroundGlowVariant	`'primary' \| 'secondary'`	No	`'primary'`
columnsDesktop	`2 \| 3 \| 4`	No	`3`
columnsMobile	`1 \| 2`	No	`1`
hasBorders	`boolean`	No	`true`
textPosition	`'center' \| 'left'`	No	`'center'`
children	`React.ReactNode`	No	`undefined`

LandingStatItem Props

Prop Name	Prop Type	Required	Default
value	`string`	Yes	-
description	`string`	Yes	-
label	`string`	No	`undefined`
className	`string`	No	`''`
variant	`'primary' \| 'secondary'`	No	`'primary'`
hasBorder	`boolean`	No	`true`

Stats Object Interface

interface StatItem {
  value: string;
  label?: string;
  description: string;
}

More Examples

For more even more examples, see our Landing Page Component Examples page or see complete landing page examples by Exploring Our Landing Page Templates.

Also see:

About Section component
Testimonial Grid component
Product Feature component