Sections
OCR Blocks help users debug and review the text layer behind scanned or image-heavy PDFs. They should show document structure without replacing the original page image.
See it composed with the PDF Viewer in the OCR Blocks block.
"use client";
import { Heading01Icon, ParagraphIcon, Table01Icon } from "@hugeicons/core-free-icons";
import { OcrBlockCard } from "@/components/ui/ocr-block-card";
export function OcrBlocksExample() {
return (
<div className="flex h-[420px] flex-col gap-2 bg-background p-3">
<OcrBlockCardInstallation
pnpm dlx shadcn@latest add https://ui.extend.ai/r/ocr-blocks.json
Useful behaviors
- Toggleable block, line, and word overlays.
- Confidence coloring for low-quality OCR regions.
- Hover and selection states that reveal text and geometry.
- Region navigation from OCR results to the rendered PDF page.
API Reference
OcrBlockCard
The OcrBlockCard component renders a selectable OCR result with type, markdown text, confidence, and page context.
| Prop | Type | Default | Required |
|---|---|---|---|
kind | string | - | Yes |
text | string | - | Yes |
confidence | number | - | No |
pageLabel | string | - | No |
icon | React.ComponentProps<typeof HugeiconsIcon>["icon"] | ParagraphIcon | No |
active | boolean | false | No |
iconClassName | string | "bg-blue-500/10 text-blue-600 dark:text-blue-300" | No |
activeClassName | string | "border-blue-500/60 bg-blue-500/5" | No |
className | string | - | No |
...props | React.ButtonHTMLAttributes<HTMLButtonElement> | - | No |
Deploy your document processing on Extend
Trusted by Brex, Flatiron, Square, and more.
Extend provides production ready tools to handle your toughest documents.
Deploy on Extend