Overview
NpsGauge displays Net Promoter Score (-100 to 100) with a visual gauge and promoter/passive/detractor breakdown. Industry-standard visualization for customer loyalty measurement.
Features
- Semi-circular gauge visualization
- Promoter/Passive/Detractor breakdown bar
- Benchmark comparison indicator
- Trend indicator with previous score
- Three size variants (sm, md, lg)
- Color-coded score categories
Examples
Basic NPS Gauge
Standard NPS display with breakdown
+42
Good
Detractors (12%)
Passives (23%)
Promoters (65%)
Score Categories
Different score ranges
+75
Excellent
Excellent (70+)
+55
Great
Great (50-69)
+25
Needs Work
Good (0-49)
-15
Critical
Critical (<0)
With Benchmark
Compare against industry benchmark
+42
Good
Benchmark: +35(+7 above)
Detractors (12%)
Passives (23%)
Promoters (65%)
With Trend
Show change from previous period
+42
Good
4 ptsvs last period
Detractors (12%)
Passives (23%)
Promoters (65%)
+42
Good
6 ptsvs last period
Detractors (12%)
Passives (23%)
Promoters (65%)
Size Variants
Available size variants
+42
Good
Small
+42
Good
Medium
+42
Good
Large
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
score | number | required | NPS score (-100 to 100) |
promoters | number | required | Percentage/count of promoters (9-10) |
passives | number | required | Percentage/count of passives (7-8) |
detractors | number | required | Percentage/count of detractors (0-6) |
showBreakdown | boolean | true | Show breakdown bar and legend |
benchmark | number | - | Industry benchmark for comparison |
showTrend | boolean | false | Show trend indicator |
previousScore | number | - | Previous score for trend |
size | "sm" | "md" | "lg" | "md" | Component size |
Usage
import { NpsGauge, ChartCard } from '@/ui/components/charts';
// Basic NPS gauge
<ChartCard title="Net Promoter Score" height="auto">
<NpsGauge
score={42}
promoters={65}
passives={23}
detractors={12}
/>
</ChartCard>
// With benchmark comparison
<NpsGauge
score={42}
promoters={65}
passives={23}
detractors={12}
benchmark={35}
showBreakdown
/>
// With trend indicator
<NpsGauge
score={42}
promoters={65}
passives={23}
detractors={12}
showTrend
previousScore={38}
/>
// Different sizes
<NpsGauge score={42} promoters={65} passives={23} detractors={12} size="sm" />
<NpsGauge score={42} promoters={65} passives={23} detractors={12} size="md" />
<NpsGauge score={42} promoters={65} passives={23} detractors={12} size="lg" />