Stats

Stats display numeric information with optional icons and descriptions. Perfect for dashboards and analytics.

const { default: Stats } = await import('/components/data-display/stats.js');

const { tags, $ } = Lightview;

const stats = Stats({ class: 'shadow' },
    Stats.Stat({},
        Stats.Title({}, 'Total Users'),
        Stats.Value({}, '89,400'),
        Stats.Desc({}, '↗︎ 21% from last month')
    ),
    Stats.Stat({},
        Stats.Title({}, 'Page Views'),
        Stats.Value({ class: 'text-primary' }, '2.6M'),
        Stats.Desc({}, '↗︎ 14% from last month')
    ),
    Stats.Stat({},
        Stats.Title({}, 'Conversion'),
        Stats.Value({ class: 'text-secondary' }, '4.2%'),
        Stats.Desc({}, '↘︎ 2% from last month')
    )
);

$('#demo').insert(stats);

const { default: Stats } = await import('/components/data-display/stats.js');

const { signal, tags, $ } = Lightview;

const visitors = signal(1234);
const sessions = signal(567);

// Simulate live updates
setInterval(() => {
    visitors.value += Math.floor(Math.random() * 10);
    sessions.value += Math.floor(Math.random() * 3);
}, 2000);

const stats = Stats({ class: 'shadow' },
    Stats.Stat({},
        Stats.Title({}, '🟢 Live Visitors'),
        Stats.Value({ class: 'text-success' }, () => visitors.value.toLocaleString()),
        Stats.Desc({}, 'Currently online')
    ),
    Stats.Stat({},
        Stats.Title({}, '📊 Active Sessions'),
        Stats.Value({}, () => sessions.value.toLocaleString()),
        Stats.Desc({}, 'Last 5 minutes')
    )
);

$('#demo').insert(stats);

Props

Sub-components

Vertical Layout