I have added a read-only React KPI Scorecard sample to the PnP SharePoint Framework webparts repository:

https://github.com/pnp/sp-dev-fx-webparts/pull/6478

The web part reads a configured SharePoint list and renders up to six KPI cards with:

• Current value and target
• Deterministic on-track, attention, at-risk, and unknown states
• Trend from the latest two observations
• Optional date filtering
• Loading, empty, access-denied, not-found, throttling, and refresh states
• Fluent UI components and keyboard-friendly status presentation

Local verification is complete: five Jest tests pass, TypeScript compiles, ESLint is clean, webpack builds, and the production .sppkg package validates.

Tenant validation requested

Could someone with a SharePoint Online tenant please try this with a representative KPI list and report:

1. Whether list and field configuration works as documented.
2. Whether number/date values map correctly from common SharePoint column types.
3. Whether threshold and trend states are understandable.
4. Whether the layout remains usable at narrow web-part widths.
5. A real tenant screenshot, if possible, for the PR gallery validation.

I do not have a suitable SharePoint Online tenant for producing an authentic screenshot, so I am intentionally asking the community rather than inventing one. Positive or negative findings are welcome; they will help make the sample more useful before merge.

Source and contribution

• PR: https://github.com/pnp/sp-dev-fx-webparts/pull/6478
• Sample path: samples/react-kpi-scorecard/
• Microsoft SPFx web parts guidance: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/overview-client-side-web-parts

sharepoint #spfx #react #opensource