React Coverage Report
A code-coverage / lint summary table — the anatomy of an nyc / istanbul report. Per-file statement, branch, function, and line percentages are colored against a threshold, each row shows a line-coverage bar and uncovered lines, and the header carries the aggregate coverage with a PASS / FAIL badge.
Coverage
80.5%| File | Stmts | Branch | Funcs | Lines | Lines | Uncovered |
|---|---|---|---|---|---|---|
| src/aes/core.ts | 96 | 89 | 100 | 97 | 142, 210 | |
| src/aes/sbox.ts | 100 | 100 | 100 | 100 | — | |
| src/aes/gcm.ts | 74 | 61 | 80 | 72 | 44-59, 88 | |
| src/kem/mlkem.ts | 91 | 83 | 95 | 92 | 301 | |
| src/util/rng.ts | 48 | 33 | 50 | 46 | 12-38 | |
| src/cli/index.ts | 83 | 71 | 88 | 84 | 5, 91-96 |
Installation
npx shadcn@latest add "https://kelvinui.com/registry/coverage-report.json"
Props
| Prop | Type | Description |
|---|---|---|
| files | CoverageFile[] | Per-file coverage rows |
| threshold | number | Pass threshold in percent (default 80) |
| title | string | Header title (default "Coverage") |
Each CoverageFile is { path, statements, branches, functions, lines, uncovered? }. Values at or above the threshold read green, above 60% of it amber, below red; the header aggregates the mean and shows PASS/FAIL.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.