Bullet KPIs
KPIs as bullet charts: actual bar, target tick and qualitative bands, with a period switch and pace for the month.
bullet-kpis.tsxbullet-kpis.css
Checking access…
Overview
Each row is a bullet chart: the background bands mark poor, fair and good; the solid bar is the actual value; a tall tick marks the target.
Switching period re-animates the bars. Month-to-date rows show whether you are on pace for the target.
When to use
- Executive dashboards, team goal tracking.
When not to use
- Trends over time: use a line chart.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/bullet-kpis.json$
npx shadcn@latest add https://sundaeui.dev/r/bullet-kpis.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/bullet-kpis.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/bullet-kpis.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy bullet-kpis.tsx and bullet-kpis.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { BulletKpis } from '@/components/sundae/bullet-kpis'
<BulletKpis />Props
| Prop | Type | Default |
|---|---|---|
rows*Metrics. | { name: string; unit?: string; target: number; max: number; values: Record<string, number> }[] | — |
periods*Period keys. | string[] | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Each bullet is a meter with value, target and band in text.
- The period switch is a radiogroup.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-blt; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Bullet KPIs free?
- Bullet KPIs is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Bullet KPIs?
- Run npx shadcn@latest add https://sundaeui.dev/r/bullet-kpis.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Bullet KPIs support keyboard and screen readers?
- Each bullet is a meter with value, target and band in text. The period switch is a radiogroup.
- Does Bullet KPIs respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All data →Pulse KPI
Data · UnderstatedStacked Bars
Data · Refined- Pro
Scrub Sparkline
Data · Refined OKR Tracker
Data · RefinedData Table
Data · Understated- Pro
Kanban Board
Data · Understated