content component

StatCard

Reusable stat card component.

@wrnexus/ui 0.2.675 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<StatCard
  label="Metric"
  value="0"
  change="change"
  trend="neutral"
/>

Legacy mount name: data-component="StatCard".

Props and attributes

Prop	Type	Requirement	Default
`class`	`string`	Optional	`""`
`label`	`string`	Optional	`"Metric"`
`value`	`string`	Optional	`"0"`
`change`	`string`	Optional	`""`
`trend`	`string`	Optional	`"neutral"`

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/StatCard.wrn

component StatCard {
  props {
    class = ""
    label = "Metric"
    value = "0"
    change = ""
    trend = "neutral"
  }
  view {
        <article class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900 {class}">
        <p class="text-sm font-medium text-slate-500">{label}</p>
        <div class="mt-2 flex items-end justify-between gap-3">
        <p class="text-3xl font-bold tracking-tight">{value}</p>
        <span data-show="change" class="text-sm font-semibold {trend === 'up' ? 'text-emerald-600' : trend === 'down' ? 'text-red-600' : 'text-slate-500'}">{trend === 'up' ? '↑' : trend === 'down' ? '↓' : ''} {change}</span>
        </div>
        </article>
    }
}