Expected vs actualPro
Expected and actual output compared field by field.
On this page
ProA structured extraction with a changed, a missing and an extra field.
Installation
Usage
import { ExpectedVsActual } from "@/components/ui/chatcn/pro/expected-vs-actual"
<ExpectedVsActual expected={expected} actual={output} />A structural diff where key order never counts. Each differing field says Different, Missing or Not expected, with the kit's red and green diff tints and - and + glyphs.
Examples
States
ProExact match, every field shown, and plain text.
Props
| Prop | Type | Notes |
|---|---|---|
expected, actual | unknown | JSON values or strings |
showSame | boolean | Include matching fields |
Accessibility
- A real table with row headers; the verdict is a word, not only a color.