Stat Counter

A trust-building statistics display showing key metrics like Zo Citizens count, destinations, and ratings with bold orange numbers.

Preview

50+

Destinations

1M+

Travellers Hosted

4.5

Average Rating

10+

Years of Travel

Usage

tsx

import { StatCounter } from "zostel-ui";

<StatCounter
  stats={[
    { value: "100,000+", label: "Zo Citizens" },
    { value: "150+", label: "Destinations" },
    { value: "4.5", label: "Avg Rating" },
  ]}
  variant="default"
/>

Props

Prop	Type	Default	Description
`stats`	`StatItem[]`	—	Array of stat objects with value and label strings
`variant`	`"default" \| "card" \| "dark"`	"default"	Visual style variant
`columns`	`number`	4	Number of grid columns
`animate`	`boolean`	false	Whether to animate the counter on scroll

stats

Type: StatItem[]

Default: —

Array of stat objects with value and label strings

variant

Type: "default" | "card" | "dark"

Default: "default"

Visual style variant

columns

Type: number

Default: 4

Number of grid columns

animate

Type: boolean

Default: false

Whether to animate the counter on scroll

Previous Social Links Next USP Grid