Stats Sections

Metric sections — a slim number band and a row of stat cards with delta chips.

Metric sections for a landing or marketing page. Each is a self-contained, full-width Svelte <section> built only from semantic tokens, so it restyles across every theme — the brand colour maps to --primary. Try the theme switcher above the preview.

Preview

10M+

Requests served daily

99.99%

Uptime across regions

150+

Countries reached

4.9/5

Average customer rating

+12.4%

48,200

Active users

+8.1%

$1.2M

Monthly revenue

+0.02%

99.99%

Uptime

+0.3

4.9/5

Customer rating

Install

bun x bosia@latest add block stats/band
bun x bosia@latest add block stats/cards

cards pulls @lucide/svelte for its icons.

The blocks

band — a slim muted band of four oversized numbers with hairline separators.
cards — four stat cards, each with an icon, value, label and a primary delta chip.

Usage

<script lang="ts">
	import Stats from "$lib/blocks/stats/band/block.svelte";
</script>

<Stats />

The numbers and labels live in a hardcoded array at the top of each block.svelte — swap in your own metrics.

Source

src/lib/blocks/stats/*/block.svelte