Primitive Run Cards
retab-ui/primitive-cards-blockFreeBlock
Each Retab primitive's result framed as a run card — a document thumbnail with a status pill and the primitive's output in the card body. Classification shows the page with its category and reasoning; split a mini page rail of color-keyed subdocuments; partition a keyed-chunk legend with an overlap ribbon; parse the page rendered as markdown; extract the page with each field's source box drawn over it. Composes the primitive-run-cards components over sample results.
Install it
npx shadcn@latest add https://ui.retab.com/r/primitive-cards-block.jsonSource
1"use client";23import { toSegments } from "@/lib/segments";4import {5 ClassificationRunCard,6 ExtractRunCard,7 ParseRunCard,8 PartitionRunCard,9 SplitRunCard,10 type ExtractRunCardField,11} from "@/components/ui/primitive-run-cards";12import type { ClassifyResult } from "@/components/viewers/lib/classify-types";13import type { PartitionResult } from "@/components/viewers/lib/partition-types";14import type { SplitView } from "@/components/viewers/lib/split-types";15import extractSample from "@/components/viewers/sample-data/extract.json";16import parseSample from "@/components/viewers/sample-data/parse.json";1718// ── Per-primitive sample results, each framed as a completed "run". ───────────1920const CLASSIFICATION = {21 file: { name: "loan-application.pdf", type: "application/pdf" },22 thumbnail: "/samples/loan-application-page-1.png",23 result: {24 category: "Loan Application",25 reasoning:26 "A Uniform Residential Loan Application (Form 1003): borrower, employment, and property details for a mortgage request.",27 } satisfies ClassifyResult,28};2930const SPLIT = {31 file: { name: "an-image-is-worth-16x16-words.pdf", type: "application/pdf" },32 thumbnail: "/samples/an-image-is-worth-16x16-words-page-1.png",33 result: {34 output: [35 { name: "Title, Abstract & Introduction", pages: [1] },36 { name: "Related Work", pages: [2] },37 { name: "Method", pages: [3] },38 { name: "Experiments", pages: [4, 5, 6, 7, 8] },39 { name: "Conclusion & References", pages: [9, 10, 11, 12] },40 { name: "Appendix", pages: [13, 14, 15, 16, 17, 18, 19, 20, 21, 22] },41 ],42 } satisfies SplitView,43};4445const PARTITION = {46 file: { name: "an-image-is-worth-16x16-words.pdf", type: "application/pdf" },47 thumbnail: "/samples/an-image-is-worth-16x16-words-page-1.png",48 result: {49 output: [50 { key: "abstract", pages: [1] },51 { key: "introduction", pages: [1, 2] },52 { key: "related_work", pages: [2] },53 { key: "method", pages: [3, 4] },54 { key: "experiments", pages: [4, 5, 6, 7, 8] },55 { key: "conclusion", pages: [9] },56 { key: "references", pages: [9, 10, 11, 12] },57 { key: "appendix", pages: [13, 14, 15, 16, 17, 18, 19, 20, 21, 22] },58 ],59 } satisfies Pick<PartitionResult, "output">,60};6162const PARSE = {63 file: { name: "bank-statement.pdf", type: "application/pdf" },64 markdown: (parseSample.output.pages[0] as string)65 .split("\n")66 .slice(0, 18)67 .join("\n"),68};6970// … truncated
What it pulls in
Other registry items
Files it writes
More from retab-ui
All 130 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Classify Consensusclassify-consensus-viewer-block | retab-ui | Blocks | Free | 1 dep · 4 files | |
| CSV Sourcescsv-sources-block | retab-ui | Blocks | Free | no deps · 2 files | |
| DOCX Sourcesdocx-sources-block | retab-ui | Blocks | Free | no deps · 2 files | |
| Avatar Image Slotdropzone-avatar-image-slot | retab-ui | Blocks | Free | 1 dep · 2 files | |
| Dropzonedropzone-block | retab-ui | Blocks | Free | 1 dep · 26 files | |
| Comparison Pairdropzone-comparison-pair-upload | retab-ui | Blocks | Free | 1 dep · 2 files | |
| Controlled Queuedropzone-controlled-queue | retab-ui | Blocks | Free | 1 dep · 2 files | |
| Custom Thumbnail Griddropzone-custom-thumbnail-grid | retab-ui | Blocks | Free | 1 dep · 2 files |
