One number, with what it means and which way it is going.
Import it from rei-kit:
import { StatCard } from 'rei-kit'
Open StatCard in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { StatCard } from 'rei-kit'
</script>
<template>
<StatCard value="¥48,200" label="This month" trend="down" />
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
value | string | yes | Already formatted — "₺1.240", "68%", "12 days". A number would make this component choose a currency, a locale and a number of decimals, which are three product decisions it has no way to be right about. |
label | string | yes | |
trend | 'up' | 'down' | 'flat' | null | null |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.