Components
A zoned bar meter with a marker at the current value, for heart-rate zones, allocations, or thresholds.
142bpm
Heart rate zone60bpm110bpm140bpm170bpm190bpm
All zones, with labels
RestFat burnCardioPeak
"use client"
import { SegmentedMeter } from "@/components/ui/segmented-meter"Installation#
pnpm dlx shadcn@latest add https://dashboardcn.com/r/segmented-meter.jsonUsage#
import { SegmentedMeter } from "@/components/ui/segmented-meter"
<SegmentedMeter
value={142}
zones={[
{ label: "Rest", from: 60, to: 110 },
{ label: "Fat burn", from: 110, to: 140 },
{ label: "Cardio", from: 140, to: 170 },
{ label: "Peak", from: 170, to: 190 },
]}
/>Your dashboard, your code.
Every component is copied into your project with the shadcn CLI. No package to upgrade, nothing to override.