Bounding Box Citations provides field-level cards for comparing extracted values with source PDF bounding boxes. Use it when reviewers need to inspect citations, correct values, and optionally compare against expected output.
See it composed with the PDF Viewer in the Bounding Box Citations block.
Statement period
Date range covered by the bank statement.
string
Actual
Jan 1-31, 2026
Expected
Transactions
Posted account activity during the statement period.
array
Actual2 rows
Expected2 rows
Ending balance
Final account balance at the end of the statement period.
number
Actual
12840.18
Expected
Overdraft protection enabled
Whether overdraft protection is enabled for the account.
boolean
Actual
false
Expected
Account details
Account owner and identifying details from the statement.
object
Properties5 fields
Holder name
string
Actual
Jordan Lee
Expected
Account last four
string
Actual
4821
Expected
Account type
string
Actual
Checking
Expected
Mailing address
object
Properties3 fields
Line 1
string
Actual
42 Market Street
Expected
City
string
Actual
Brooklyn
Expected
State
string
Actual
NY
Expected
Linked accounts
array
Actual1 rows
Expected2 rows
"use client";
import * as React from "react";
import { HumanReviewPanel, type ReviewField } from "@/components/ui/bounding-box-citations";
const fields: ReviewField[] = [
{
key: "statement_period",
schema: {Installation
Glide Data Grid renders overlay editors into a root portal. Add this element as
the last child of your app's <body> before using the component:
<div id="portal" className="fixed top-0 left-0 z-40" />Next.js SSR
Glide Data Grid uses browser-only APIs. If you see SSR errors, render Bounding
Box Citations through next/dynamic with ssr: false.
pnpm dlx shadcn@latest add @extend/bounding-box-citations
Useful behaviors
- Actual and expected values displayed side by side for each schema field when
showExpectedis enabled. - Array values rendered with Glide Data Grid, including drill-down for nested arrays and objects.
- Input controls selected from the JSON schema property type.
- Object schema properties rendered as nested cards in the scrollable form.
- Per-field undo and Set to NULL actions when
showExpectedis enabled. - Form and JSON diff views for the same reviewed output state when
showExpectedis enabled.
API Reference
HumanReviewPanel
The HumanReviewPanel component renders editable review fields and a JSON diff for the same extraction output.
| Prop | Type | Default | Required |
|---|---|---|---|
fields | ReviewField[] | sample fields | No |
activeFieldKey | string | - | No |
className | string | - | No |
onFieldFocus | (field: ReviewField) => void | - | No |
showExpected | boolean | true | No |
theme | "light" | "dark" | "light" | No |
ReviewField
| Prop | Type | Default | Required |
|---|---|---|---|
key | string | - | Yes |
schema | ReviewFieldSchema | - | Yes |
actual | JsonValue | - | Yes |
expected | JsonValue | - | Yes |
location | { page: number; area: HighlightArea } | - | No |