Stat · juxt.ui

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JStat } from '@juxtui/ui'

Usage #

<JStat label="Monthly recurring revenue" value="$48,200" delta="+12%" trend="up" description="vs. last month" />

delta is display text, not a number — format it yourself ("+12%", "-3", "0"), trend only decides the colour and arrow.

Without trend, a delta still renders, just in a neutral colour with no arrow.

Variants & examples #

In a grid#

Three stats side by side, each with its own trend.

2,481 +8.2%

1.4% +0.3%

62 0%

<template>
  <div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
    <JStat label="Active users" value="2,481" delta="+8.2%" trend="up" />
    <JStat label="Churn" value="1.4%" delta="+0.3%" trend="down" />
    <JStat label="Support tickets" value="62" delta="0%" trend="neutral" />
  </div>
</template>

With an icon#

$1,204.50

Next charge on Oct 1

<script setup lang="ts">
import { CreditCard } from '@lucide/vue'
</script>

<template>
  <JStat label="Balance" value="$1,204.50" description="Next charge on Oct 1">
    <template #icon><CreditCard /></template>
  </JStat>
</template>

API #

Props

Prop	Type	Default	Description
label	`string`	—	What the number measures.
value	`string \| number`	—	The headline number.
delta	`string`	—	Change shown next to the value, e.g. `"+12%"`.
trend	`'up' \| 'down' \| 'neutral'`	—	Colours `delta` and adds an arrow icon (none for `neutral`).
description	`string`	—	Supporting line under the value.

Slots

Slot	Props	Description
icon	—	Small icon shown next to the label.

Accessibility #

Renders as plain text — there’s no live region, so a stat that updates in place should be wrapped in your own aria-live region if the change matters to announce.
Trend colour is reinforced by the arrow icon, not colour alone.