Site Stat Counter

Stat Counter

Numbers in Warm Orange — and only the public ones: 111 Zostels · 80+ destinations · 5M+ travellers · since 2013.

Preview

111

Zostels

80+

destinations

5M+

travellers

2013

since

Usage

tsx

import { StatCounter } from "zostel-ui";

<StatCounter
  stats={[
    { value: "111", label: "Zostels" },
    { value: "80+", label: "destinations" },
    { value: "5M+", label: "travellers" },
    { value: "2013", label: "since" },
  ]}
  layout="grid"
  columns={4}
/>

Props

Prop	Type	Default	Description
`stats`	`{ value: string; label: string }[]`	—	The numbers. Business and fundraising numbers stay out of brand material.
`layout`	`"horizontal" \| "grid"`	`"horizontal"`	A wrapping row, or a grid.
`columns`	`2 \| 3 \| 4`	`3`	Grid columns from md up.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

stats

Type: { value: string; label: string }[]

Default: —

The numbers. Business and fundraising numbers stay out of brand material.

layout

Type: "horizontal" | "grid"

Default: "horizontal"

A wrapping row, or a grid.

columns

Type: 2 | 3 | 4

Default: 3

Grid columns from md up.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).