Stats Grid

A responsive grid layout for displaying key statistics and metrics with smooth animations.

Open in

Configuring your account...

Please wait while we prepare everything for you

Usage

import StatsGrid from '@/components/bynanaui/stats-grid'

<StatsGrid
  title="Our Impact in Numbers"
  description="See how we're making a difference across the globe"
  stats={[
    {
      value: "10M+",
      label: "Active Users",
      description: "Growing every day",
    },
    {
      value: "99.9%",
      label: "Uptime", 
      description: "Reliable service",
    }
  ]}
/>

Props

PropTypeDefaultDescription
titlestring"Our Impact in Numbers"Main heading text
descriptionstring"See how we're making a difference across the globe"Subtitle text
statsArray<{value: string, label: string, description?: string}>Default stats arrayArray of statistics to display
classNamestring""Additional CSS classes

Features

  • Responsive Design: Adapts to different screen sizes with grid layout
  • Smooth Animations: Uses Framer Motion for entrance animations
  • Hover Effects: Interactive hover states with gradient overlays
  • Customizable: Easy to modify colors, spacing, and content
  • Accessible: Proper semantic HTML structure