Flux

Appearance

KPI ​

The KPI (Key Performance Indicator) widget displays a single prominent metric alongside an optional trend indicator and footer. It is compact by default and well suited for use in a Statistics grid.

Total users
12,430
vs. last month
Orders
3,821
vs. last month

Props

title: string
The title of the KPI widget.

value: string | number
The primary value displayed in the KPI widget.

change?: FluxStatisticsChange
An optional change indicator shown below the value.

footer?: string
An optional footer text shown below the change indicator.

icon?: FluxIconName
An icon shown in the header of the widget.

Examples ​

Simple

A KPI widget without a change indicator.

Total users
12,430

<template>
    <FluxStatisticsKpi
        style="min-width: 100%; max-width: 360px"
        icon="users"
        title="Total users"
        value="12,430"/>
</template>

<script
    setup
    lang="ts">
    import { FluxStatisticsKpi } from '@flux-ui/statistics';
</script>

In a grid

Multiple KPI widgets arranged in a responsive statistics grid.

Total users
12,430
vs. last month
Orders
3,821
vs. last month
Revenue
€ 48,290
vs. last month

<template>
    <FluxStatisticsGrid
        :xs="1"
        :sm="2"
        :md="3"
        style="min-width: 100%">
        <FluxStatisticsKpi
            icon="users"
            title="Total users"
            value="12,430"
            footer="vs. last month"
            :change="{color: 'success', icon: 'arrow-trend-up', value: '+8.2%'}"/>

        <FluxStatisticsKpi
            icon="cart-shopping"
            title="Orders"
            value="3,821"
            footer="vs. last month"
            :change="{color: 'danger', icon: 'arrow-trend-down', value: '-1.4%'}"/>

        <FluxStatisticsKpi
            icon="money-bill"
            title="Revenue"
            value="€ 48,290"
            footer="vs. last month"
            :change="{color: 'success', icon: 'arrow-trend-up', value: '+12.7%'}"/>
    </FluxStatisticsGrid>
</template>

<script
    setup
    lang="ts">
    import { FluxStatisticsGrid, FluxStatisticsKpi } from '@flux-ui/statistics';
</script>

Used components ​