Stat
Examples
Basic Stat
Currency Formatting
Percentage Values
Time Duration
Delta Comparison
Color Variants
Dashboard KPIs
Sales Metrics
Performance Metrics
User Engagement
E-commerce Dashboard
Financial Summary
SaaS Metrics
Marketing Campaign
Support Dashboard
Status Overview
Large Numbers
Importing
Slots
Events
Custom Properties
Parts
Dependencies

Stats Tile

<zn-stat> | ZnStatsTile

Since 1.0

experimental

Short summary of the component’s intended use.

<zn-cols>
  <zn-panel>
    <zn-stat caption="Total Revenue" description="This month" amount="48250" previous="42100" currency="$" show-delta></zn-stat>
  </zn-panel>
</zn-cols>

Examples

Basic Stat

A basic stat displays a caption, description, and amount.

<zn-cols>
  <zn-panel>
    <zn-stat caption="Total Users" description="Active accounts" amount="1247"></zn-stat>
  </zn-panel>
</zn-cols>

Currency Formatting

Use the currency attribute to automatically format monetary values with proper comma separators and decimal places.

<zn-cols>
  <zn-panel>
    <zn-stat caption="Monthly Revenue" description="January 2026" amount="125750.50" currency="$" color="success"></zn-stat>
  </zn-panel>
  <zn-panel>
    <zn-stat caption="Total Sales" description="This quarter" amount="487999.99" currency="$" color="info"></zn-stat>
  </zn-panel>
  <zn-panel>
    <zn-stat caption="Outstanding Balance" description="Accounts receivable" amount="23450" currency="$" color="warning"></zn-stat>
  </zn-panel>
</zn-cols>

Percentage Values

Use type="percent" to display percentage metrics.

<zn-cols>
  <zn-panel>
    <zn-stat caption="Conversion Rate" description="Last 30 days" amount="4.8" type="percent" color="success"></zn-stat>
  </zn-panel>
  <zn-panel>
    <zn-stat caption="Bounce Rate" description="Website visitors" amount="32.5" type="percent" color="warning"></zn-stat>
  </zn-panel>
  <zn-panel>
    <zn-stat caption="Growth" description="Year over year" amount="127.3" type="percent" color="info"></zn-stat>
  </zn-panel>
</zn-cols>

Time Duration

Use type="time" to display time values in seconds, which will be formatted as HH:MM:SS or MM:SS.

<zn-cols>
  <zn-panel>
    <zn-stat caption="Avg. Session Time" description="User engagement" amount="245" type="time" color="info"></zn-stat>
  </zn-panel>
  <zn-panel>
    <zn-stat caption="Processing Time" description="Last job" amount="3665" type="time" color="success"></zn-stat>
  </zn-panel>
  <zn-panel>
    <zn-stat caption="Response Time" description="API average" amount="45" type="time" color="primary"></zn-stat>
  </zn-panel>
</zn-cols>

Delta Comparison

Use the show-delta attribute with previous to show the percentage change from a previous period.

<zn-cols>
  <zn-panel>
    <zn-stat caption="New Users" description="This week" amount="324" previous="280" show-delta color="success"></zn-stat>
  </zn-panel>
  <zn-panel>
    <zn-stat caption="Revenue" description="This month" amount="45600" previous="52300" currency="$" show-delta color="error"></zn-stat>
  </zn-panel>
  <zn-panel>
    <zn-stat caption="Conversion Rate" description="Last 30 days" amount="3.2" previous="3.2" type="percent" show-delta color="neutral"></zn-stat>
  </zn-panel>
</zn-cols>

Color Variants

Use the color attribute to set the semantic color of the stat. Available colors: primary, error, info, warning, success, and neutral.

<zn-cols>
  <zn-panel>
    <zn-stat caption="Active" description="Status" amount="99.8" type="percent" color="primary"></zn-stat>
  </zn-panel>
  <zn-panel>
    <zn-stat caption="Critical Errors" description="Last hour" amount="3" color="error"></zn-stat>
  </zn-panel>
  <zn-panel>
    <zn-stat caption="Notifications" description="Unread" amount="24" color="info"></zn-stat>
  </zn-panel>
  <zn-panel>
    <zn-stat caption="Warnings" description="System alerts" amount="7" color="warning"></zn-stat>
  </zn-panel>
  <zn-panel>
    <zn-stat caption="Completed" description="Tasks today" amount="42" color="success"></zn-stat>
  </zn-panel>
  <zn-panel>
    <zn-stat caption="Pending" description="In queue" amount="156" color="neutral"></zn-stat>
  </zn-panel>
</zn-cols>

Dashboard KPIs

A common use case is displaying multiple KPIs in a dashboard layout.

<zn-cols>
  <zn-panel>
    <zn-stat
      caption="Total Revenue"
      description="All time"
      amount="2847500"
      previous="2650000"
      currency="$"
      show-delta
      color="success">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Active Customers"
      description="Current subscribers"
      amount="4582"
      previous="4201"
      show-delta
      color="info">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Avg Order Value"
      description="Last 30 days"
      amount="127.50"
      previous="115.80"
      currency="$"
      show-delta
      color="primary">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Satisfaction Rate"
      description="Customer feedback"
      amount="94.7"
      previous="92.3"
      type="percent"
      show-delta
      color="success">
    </zn-stat>
  </zn-panel>
</zn-cols>

Sales Metrics

Display sales-related statistics with currency formatting.

<zn-cols>
  <zn-panel>
    <zn-stat
      caption="Today's Sales"
      description="Updated 5 min ago"
      amount="12450.75"
      currency="$"
      color="success">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="This Week"
      description="7 day total"
      amount="84922"
      previous="78100"
      currency="$"
      show-delta
      color="info">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="This Month"
      description="Month to date"
      amount="342678.50"
      previous="298450"
      currency="$"
      show-delta
      color="primary">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Annual Goal"
      description="78% complete"
      amount="3847250"
      currency="$"
      color="warning">
    </zn-stat>
  </zn-panel>
</zn-cols>

Performance Metrics

Track system or application performance indicators.

<zn-cols>
  <zn-panel>
    <zn-stat
      caption="Uptime"
      description="Last 30 days"
      amount="99.97"
      type="percent"
      color="success">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="API Response"
      description="Average latency"
      amount="127"
      type="time"
      color="info">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Error Rate"
      description="Last 24 hours"
      amount="0.08"
      previous="0.12"
      type="percent"
      show-delta
      color="success">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Queue Time"
      description="Processing delay"
      amount="43"
      previous="28"
      type="time"
      show-delta
      color="warning">
    </zn-stat>
  </zn-panel>
</zn-cols>

User Engagement

Display user-related metrics and engagement statistics.

<zn-cols>
  <zn-panel>
    <zn-stat
      caption="Page Views"
      description="Last 7 days"
      amount="847523"
      previous="792100"
      show-delta
      color="info">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Unique Visitors"
      description="This week"
      amount="34782"
      previous="31245"
      show-delta
      color="success">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Avg. Session"
      description="User engagement"
      amount="342"
      previous="298"
      type="time"
      show-delta
      color="primary">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Return Rate"
      description="Returning users"
      amount="64.8"
      previous="62.1"
      type="percent"
      show-delta
      color="success">
    </zn-stat>
  </zn-panel>
</zn-cols>

E-commerce Dashboard

A complete e-commerce metrics dashboard.

<zn-cols>
  <zn-panel>
    <zn-stat
      caption="Orders Today"
      description="Real-time"
      amount="147"
      previous="132"
      show-delta
      color="primary">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Cart Abandonment"
      description="Last 24 hours"
      amount="28.4"
      previous="31.7"
      type="percent"
      show-delta
      color="success">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Inventory Value"
      description="Current stock"
      amount="487250"
      currency="$"
      color="info">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Refund Rate"
      description="This month"
      amount="2.3"
      previous="1.8"
      type="percent"
      show-delta
      color="warning">
    </zn-stat>
  </zn-panel>
</zn-cols>

Financial Summary

Display financial metrics with appropriate formatting.

<zn-cols>
  <zn-panel>
    <zn-stat
      caption="Net Profit"
      description="Q4 2025"
      amount="847500.25"
      previous="792340.50"
      currency="$"
      show-delta
      color="success">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Operating Costs"
      description="This quarter"
      amount="234890"
      previous="248750"
      currency="$"
      show-delta
      color="success">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Profit Margin"
      description="After expenses"
      amount="28.4"
      previous="26.7"
      type="percent"
      show-delta
      color="primary">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Cash Flow"
      description="Monthly average"
      amount="142750"
      currency="$"
      color="info">
    </zn-stat>
  </zn-panel>
</zn-cols>

SaaS Metrics

Key metrics for SaaS businesses.

<zn-cols>
  <zn-panel>
    <zn-stat
      caption="MRR"
      description="Monthly recurring revenue"
      amount="284750"
      previous="267890"
      currency="$"
      show-delta
      color="success">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Churn Rate"
      description="Customer attrition"
      amount="3.2"
      previous="4.1"
      type="percent"
      show-delta
      color="success">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="CAC"
      description="Customer acquisition cost"
      amount="127.50"
      previous="142.80"
      currency="$"
      show-delta
      color="success">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="LTV:CAC"
      description="Lifetime value ratio"
      amount="4.8"
      previous="4.2"
      show-delta
      color="info">
    </zn-stat>
  </zn-panel>
</zn-cols>

Marketing Campaign

Track marketing campaign performance.

<zn-cols>
  <zn-panel>
    <zn-stat
      caption="Impressions"
      description="Campaign reach"
      amount="1847523"
      previous="1592340"
      show-delta
      color="info">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Click Rate"
      description="CTR"
      amount="3.8"
      previous="2.9"
      type="percent"
      show-delta
      color="success">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Cost Per Click"
      description="Average CPC"
      amount="1.42"
      previous="1.68"
      currency="$"
      show-delta
      color="success">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="ROAS"
      description="Return on ad spend"
      amount="487"
      previous="412"
      type="percent"
      show-delta
      color="primary">
    </zn-stat>
  </zn-panel>
</zn-cols>

Support Dashboard

Display customer support metrics.

<zn-cols>
  <zn-panel>
    <zn-stat
      caption="Open Tickets"
      description="Requires attention"
      amount="47"
      previous="62"
      show-delta
      color="success">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Avg Response Time"
      description="First reply"
      amount="892"
      previous="1247"
      type="time"
      show-delta
      color="success">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Resolution Rate"
      description="First contact"
      amount="78.4"
      previous="73.2"
      type="percent"
      show-delta
      color="info">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Satisfaction"
      description="CSAT score"
      amount="94.7"
      previous="92.1"
      type="percent"
      show-delta
      color="success">
    </zn-stat>
  </zn-panel>
</zn-cols>

Status Overview

Simple status indicators without delta comparisons.

<zn-cols>
  <zn-panel>
    <zn-stat
      caption="System Status"
      description="All systems operational"
      amount="100"
      type="percent"
      color="success">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Active Sessions"
      description="Current users"
      amount="1847"
      color="info">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Queue Length"
      description="Pending jobs"
      amount="23"
      color="warning">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Failed Jobs"
      description="Requires intervention"
      amount="2"
      color="error">
    </zn-stat>
  </zn-panel>
</zn-cols>

Large Numbers

Stats automatically format large numbers with currency symbols.

<zn-cols>
  <zn-panel>
    <zn-stat
      caption="Total Valuation"
      description="Company worth"
      amount="12500000"
      currency="$"
      color="primary">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Total Users"
      description="Platform wide"
      amount="8472831"
      color="info">
    </zn-stat>
  </zn-panel>

  <zn-panel>
    <zn-stat
      caption="Transactions"
      description="All time"
      amount="24789532"
      color="success">
    </zn-stat>
  </zn-panel>
</zn-cols>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.113/dist/components/stat/stat.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.113/dist/components/stat/stat.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/stat/stat.js';

Slots

Name	Description
(default)	The default slot.
`example`	An example slot.

Learn more about using slots.

Events

Name	React Event	Description	Event Detail
`zn-event-name`		Emitted as an example.	-

Learn more about events.

Custom Properties

Name	Description	Default
`--example`	An example CSS custom property.

Learn more about customizing CSS custom properties.

Parts

Name	Description
`base`	The component’s base wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

<zn-example>