Flux

Appearance

Grid ​

The statistics grid is a responsive layout component for arranging statistics widgets. Column counts can be defined per breakpoint and cascade from smaller to larger screen sizes when not explicitly set.

Total users
12,430
Orders
3,821
Revenue
€ 48,290

Props

gap?: number
The gap in pixels between grid items.

xs?: number
The number of columns on extra small screens.

sm?: number
The number of columns on small screens. Falls back to xs.

md?: number
The number of columns on medium screens. Falls back to sm.

lg?: number
The number of columns on large screens. Falls back to md.

xl?: number
The number of columns on extra large screens. Falls back to lg.

Slots

default
The statistics widgets to display in the grid.

Examples ​

Responsive

A grid that collapses to one column on small screens and expands to four on large screens.

Total users
12,430
Orders
3,821
Revenue
€ 48,290
Conversion
3.6%

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

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

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

        <FluxStatisticsKpi
            icon="chart-line"
            title="Conversion"
            value="3.6%"
            :change="{color: 'success', icon: 'arrow-trend-up', value: '+0.4%'}"/>
    </FluxStatisticsGrid>
</template>

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