Sections

Stats

A row of headline figures.

Server safeSource

Import

import { Stats } from '@the_viveksingh/vivek-ui'

Headline figures

value and label are announced together, so "83 components" is one fact rather than a number floating next to a word.

Components: 83; Plus six chart types
Runtime dependencies: 0; React is a peer
Whole library: 40.5 kB; Minified and gzipped
Tests: 1268; Every component has an axe check

<Stats
  eyebrow="By the numbers"
  title="What one install gives you"
  columns={{ base: 2, lg: 4 }}
  items={[
    { id: 'components', value: '83', label: 'Components', description: 'Plus six chart types' },
    { id: 'deps', value: '0', label: 'Runtime dependencies', description: 'React is a peer' },
    { id: 'size', value: '40.5 kB', label: 'Whole library', description: 'Minified and gzipped' },
    { id: 'tests', value: '1268', label: 'Tests', description: 'Every component has an axe check' },
  ]}
/>

Without a header

Drop the eyebrow and title to use it as a strip inside another section.

Components: 83; Plus six chart types
Runtime dependencies: 0; React is a peer
Whole library: 40.5 kB; Minified and gzipped

<Stats padding="sm" items={items} columns={3} />

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Stats
Prop	Type	Default	Description
`items`	`Stat[]`	—	—
`columns`	`number \| ResponsiveCols`	—	Omit for an auto-fitting grid, which reflows at every width.
`minItemWidth`	`string`	—	Auto-fit track floor when `columns` is omitted. Defaults to `12rem`.
`eyebrow`	`ReactNode`	—	A plain string becomes a pill `Badge`; a node is rendered as given.
`title`	`ReactNode`	—	—
`description`	`ReactNode`	—	—
`headingLevel`	`HeadingLevel`	—	Level of the section's own `title`. Defaults to `2`.

Rendering

Server safe

Stats carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.