Marketing

Stats Section

A marketing statistics row displaying large bold numbers with labels and optional descriptions. Dividers separate columns on desktop; items stack on mobile.

50k+

Developers

Using Aether UI in production

Components

Primitives, patterns, and blocks

264

Tests

Covering all packages

MIT

License

Free forever, no lock-in

import { StatsSection } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add stats-section

Import

import.tsx

import { StatsSection } from "@aetherstack/blocks"

Usage

stats-section.tsx

import { StatsSection } from "@aetherstack/blocks"

export default function StatsPage() {
  return (
    <StatsSection
      stats={[
        { value: "50k+", label: "Developers", description: "Using Aether UI in production" },
        { value: "38", label: "Components", description: "Primitives, patterns, and blocks" },
        { value: "264", label: "Tests", description: "Covering all packages" },
        { value: "MIT", label: "License", description: "Free forever, no lock-in" },
      ]}
    />
  )
}

Props

Prop	Type	Default	Description
stats*	{ value: string; label: string; description?: string }[]	—	Array of stat items.
cols	2 \| 3 \| 4	4	Grid column count. Auto-inferred from stats length when ≤ 4.
className	string	—	Additional classes on the section wrapper.

* Required

Accessibility

→Uses semantic <section> element.
→Numbers are rendered as plain text — screen readers will announce them naturally.