Components
- Activity Heatmap
- Activity Rings
- Bar Chart
- Bar List
- Command Palette
- Composed Chart
- Corner Frame
- Data Table
- Delta Badge
- Distribution Bar
- Donut Chart
- Dot Plot
- Funnel Chart
- Heatmap Chart
- KPI Card
- Metric List
- Metric Value
- Period Tabs
- Radar Chart
- Radial Gauge
- Sankey Chart
- Scatter Chart
- Segmented Meter
- Sparkline
- Tick Bar
- Timeline
- Trend Chart
Blocks
- Activity Rings Card
- Allocation Card
- Balance Chart Card
- Breakdown Card
- Commerce KPI Row
- Contributions Card
- Data Table Card
- Distribution Card
- Dot Plot Card
- Dual Metric Card
- Funnel Chart Card
- Goal Chart Card
- Heatmap Chart Card
- Insight Card
- KPI Row Card
- Metric Tabs Chart Card
- Payment Summary Card
- Period Bar Chart Card
- Progress Card
- Revenue Ring Card
- Ring KPI Card
- Score Gauge Card
- Stage Bars Card
- Status Gauge Card
- Tick KPI Card
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"A bar meter split into zones with a marker at the current value, for heart-rate zones, portfolio allocations, or thresholds where the zone a value falls in matters more than the number.
Installation#
pnpm dlx shadcn@latest add @dashboardcn/segmented-meterUsage#
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.