Stats Section

Layout

Display key metrics and statistics in an engaging grid layout.

Import

import { 
  PixelStats,
  PixelStatItem,
  PixelStatIcon,
  PixelStatValue,
  PixelStatLabel,
  PixelStatDescription,
  PixelStatTrend,
  PixelStatsHeader,
  PixelStatsSectionTitle,
  PixelStatsSectionDescription
} from "@/components/ui/pixel/pixel-stats"

Usage

👥
10K+

Active Users

↑+12%
⭐
4.9/5

User Rating

🚀
99.9%

Uptime

💰
$2M+

Revenue

↑+25%

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel/pixel-stats.tsx

import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils";

const pixelStatsVariants = cva("relative w-full", {
  variants: {
    variant: {
      default: "bg-[#f5f5dc] dark:bg-[#1a1a1a]",
      primary: "bg-[#ff8c00] text-white",
      secondary: "bg-[#ffd700] text-black",
      dark: "bg-black text-white",
    },
    columns: {
      2: "grid-cols-1 md:grid-cols-2",
      3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
      4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
    },
    gap: {
      none: "gap-0",
      sm: "gap-4",
      md: "gap-8",
      lg: "gap-12",
      xl: "gap-16",
    },
  },
  defaultVariants: {
    variant: "default",
    columns: 4,
    gap: "md",
  },
});

export interface PixelStatsProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof pixelStatsVariants> {
  children?: React.ReactNode;
}

const PixelStats = React.forwardRef<HTMLDivElement, PixelStatsProps>(
  ({ className, variant, columns, gap, children, ...props }, ref) => {
    return (
      <section
        ref={ref}
        className={cn(
          pixelStatsVariants({ variant }),
          "py-16 md:py-24",
          className,
        )}
        {...props}
      >

// ... (more code below)

Props

PropTypeDefaultDescription
columns2 | 3 | 44Number of columns in the grid
gap"none" | "sm" | "md" | "lg" | "xl""md"Gap between stat items
variant"default" | "primary" | "secondary" | "dark" | "gradient""default"Stat item visual style
trend"up" | "down" | "neutral""neutral"Trend indicator direction and color

Examples

Basic Stats Grid

Simple 4-column stats display

👥
10K+

Active Users

↑+12%
⭐
4.9/5

User Rating

🚀
99.9%

Uptime

💰
$2M+

Revenue

↑+25%

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.