I9kStat

Value/label/source stack for a single statistic. Use it in a grid of a few key numbers, such as metrics on an about page or a pricing comparison.

View as MarkdownView source

import { I9kStat } from '@9klabs/design';

Examples

Sizes

12small stat

480k+monthly downloads

10+years building products

<div style="display: grid; gap: var(--spacing-13); grid-template-columns: repeat(3, minmax(0, 1fr))">
  <I9kStat label="small stat" size="sm" value="12" />
  <I9kStat label="monthly downloads" size="md" value="480k+" />
  <I9kStat label="years building products" size="lg" value="10+" />
</div>

Slot overrides

99.9%availability targetservice report

<I9kStat>
  <template #value><strong>99.9%</strong></template>
  <template #label>availability target</template>
  <template #source><a href="#" @click.prevent>service report</a></template>
</I9kStat>

Watch out

• Each of value/label/source only renders when its prop is set or its same-named slot is filled — an I9kStat with none of the three renders an empty shell.
• When both the prop and the matching slot are given, the slot content is what renders.

API

Props

Prop	Type	Default	Required
as	string | Component	'div'	no
label	string	undefined	no
size	'sm' | 'md' | 'lg'	'md'	no
source	string	undefined	no
value	string | number	undefined	no

Slots

• value
• label
• source

Agent prompt

Paste this into an agent to have it use the component correctly. It is self-contained.

Use I9kStat from @9klabs/design to display one statistic (value, label, and optional source).

import { I9kStat } from '@9klabs/design';

Props:
- as?: string | Component (default 'div') — the rendered root tag or component.
- label?: string (default undefined)
- size?: 'sm' | 'md' | 'lg' (default 'md')
- source?: string (default undefined)
- value?: string | number (default undefined)

Emits: none.

Slots:
- value — overrides the `value` prop's rendering, e.g. to bold or link the number.
- label — overrides the `label` prop's rendering.
- source — overrides the `source` prop's rendering, e.g. to link a citation.

Behavior: each of value/label/source renders only when its prop is set OR its matching slot is filled — pass either the prop or the slot for a given piece, not neither.

IMPORTANT: nothing renders for value, label, or source unless you supply the prop or the matching slot — do not rely on a slot alone without checking the prop is left unset (they are not mutually exclusive, but the slot always takes rendering priority when both are present).

Usage:
<I9kStat label="monthly npm downloads" value="480k+" source="npm snapshot" size="lg" />