Components / Data
StatGrid
The marketing KPI strip: large figures with labels, notes and linked sources, with a live dot for live sources.
Extracted fromMarketing site
Import
tsx
import { StatGrid } from "@somnia-chain/ui"
// in a Next.js app, internal links use next/link:
import { StatGrid } from "@somnia-chain/ui/next"Examples
KPI strip
- Transactions per second
- 1M+
- Devnet benchmark
- Somnia docs
- Finality
- <500 ms
- Network info
- Block time
- 100 ms
- Live
- Median fee
- $0.0001
- Explorer
examples/stat-grid/default.tsxShow codeHide code
tsx
import { StatGrid } from "@somnia-chain/ui"
export default function StatGridExample() {
return (
<StatGrid
stats={[
{ value: "1M+", label: "Transactions per second", note: "Devnet benchmark", source: "Somnia docs" },
{ value: "<500 ms", label: "Finality", source: "Network info" },
{ value: "100 ms", label: "Block time", source: "Live", live: true },
{ value: "$0.0001", label: "Median fee", source: "Explorer", live: true },
]}
/>
)
}With icons
- Transactions per second
- 1M+
- Somnia docs
- Finality
- <500 ms
- Network info
- Block time
- 100 ms
- Live
- Median fee
- $0.0001
- Explorer
examples/stat-grid/icons.tsxShow codeHide code
tsx
import { StatGrid } from "@somnia-chain/ui"
import { Clock, Gauge, Receipt, Timer } from "lucide-react"
export default function StatGridIconsExample() {
return (
<StatGrid
stats={[
{ icon: <Gauge strokeWidth={1.5} />, value: "1M+", label: "Transactions per second", source: "Somnia docs" },
{ icon: <Timer strokeWidth={1.5} />, value: "<500 ms", label: "Finality", source: "Network info" },
{ icon: <Clock strokeWidth={1.5} />, value: "100 ms", label: "Block time", source: "Live", live: true },
{ icon: <Receipt strokeWidth={1.5} />, value: "$0.0001", label: "Median fee", source: "Explorer", live: true },
]}
/>
)
}Props
StatGrid