Layout Blocks

A scrollable review panel that lists OCR/layout-detection blocks (headings, paragraphs, tables, figures, etc.) from a document with type badges, confidence scores, and page numbers, for inspecting the text layer behind scanned or image-heavy PDFs.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Layout Blocks to your project and fits it to your theme.

import LayoutBlocks from "@/components/ui/layout-blocks";

export default function LayoutBlocksDemo() {
  return (
    <div className="w-full max-w-sm">
      <LayoutBlocks />
    </div>
  );
}