Components / Data
Meter
Thin horizontal meter for a value from 0 to 1, e.g. utilization or a YES probability.
Extracted fromExplorer
Import
tsx
import { Meter } from "@somnia-chain/ui"
// in a Next.js app, internal links use next/link:
import { Meter } from "@somnia-chain/ui/next"Examples
Meters
YES probability62%
Pool utilization81%
Validators online98%
examples/meter/default.tsxShow codeHide code
tsx
import { Meter } from "@somnia-chain/ui"
export default function MeterExample() {
return (
<div className="flex max-w-md flex-col gap-4">
{[
{ label: "YES probability", value: 0.62, tone: "accent" as const },
{ label: "Pool utilization", value: 0.81, tone: "warn" as const },
{ label: "Validators online", value: 0.98, tone: "up" as const },
].map((m) => (
<div key={m.label} className="flex flex-col gap-1.5">
<div className="flex justify-between text-[12.5px] text-fg-2">
<span>{m.label}</span>
<span className="tabular font-mono">{Math.round(m.value * 100)}%</span>
</div>
<Meter value={m.value} tone={m.tone} />
</div>
))}
</div>
)
}Props
Meter