Stalk UI

Component

Stat

Displays a KPI read-out with label, value, toned delta, and a trend slot.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/stat

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<Stat.Root>
  <Stat.Label>Storage used</Stat.Label>
  <Stat.Value>
    412 <Stat.Unit>GB</Stat.Unit>
  </Stat.Value>
  <Stat.Delta direction="up">+8.2% vs yesterday</Stat.Delta>
</Stat.Root>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`direction``StatDeltaDirection`No-Movement since the comparison period; drives tone and arrow.
PropTypeRequiredDefaultDescription
`size``StatSize`No--

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

VariantValues
`size``sm`, `md`, `lg`

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/stat.json`
  • Recipe: `stat`
  • Files: `src/components/ui/stat.tsx`