sh4dcnv2 · atlas
← libraries

@retab

Document-processing UI components for Retab — file, OCR, and data viewers, schema builders, dropzones, and extraction blocks, built on shadcn/ui.

130 components react shadcn-cli

Install this registry

shadcn (npm) npx shadcn@latest add https://ui.retab.com/r/registry.json
pnpm pnpm dlx shadcn@latest add https://ui.retab.com/r/registry.json
bun bunx shadcn@latest add https://ui.retab.com/r/registry.json
fetch registry curl -s https://ui.retab.com/r/registry.json

Components

130 total
Viewer Controls ui

A shared controls row for viewer chrome: title, position, zoom, rotate, download, loading, and extra controls.

npx shadcn@latest add https://ui.retab.com/r/viewer-controls.json
Utils lib

Shared class name helper used by Retab UI registry components.

npx shadcn@latest add https://ui.retab.com/r/utils.json
Effect Key lib

Dependency-array key helpers for keyed effect lifecycles.

npx shadcn@latest add https://ui.retab.com/r/effect-key.json
Use Mobile hook

A media query hook for mobile responsive UI.

npx shadcn@latest add https://ui.retab.com/r/use-mobile.json
Use Mount Effect hook

A mount-only effect hook for explicit lifecycle escape hatches.

npx shadcn@latest add https://ui.retab.com/r/use-mount-effect.json
Use Keyed Mount Effect hook

A key-driven post-commit effect hook for library internals.

npx shadcn@latest add https://ui.retab.com/r/use-keyed-mount-effect.json
Use Keyed Layout Effect hook

A key-driven layout-timed effect hook for DOM measurement and scroll/focus lifecycles.

npx shadcn@latest add https://ui.retab.com/r/use-keyed-layout-effect.json
Alert ui

A callout for displaying contextual messages.

npx shadcn@latest add https://ui.retab.com/r/alert.json
Alert Dialog ui

A modal alert dialog for destructive confirmations and blocking decisions.

npx shadcn@latest add https://ui.retab.com/r/alert-dialog.json
Aspect Ratio ui

A small wrapper for preserving media aspect ratios.

npx shadcn@latest add https://ui.retab.com/r/aspect-ratio.json
Autocomplete ui

An autocomplete input built on Base UI primitives.

npx shadcn@latest add https://ui.retab.com/r/autocomplete.json
Command ui

A command menu surface powered by cmdk.

npx shadcn@latest add https://ui.retab.com/r/command.json
Dropzone ui

A headless file-intake primitive with drag/drop, file input wiring, validation, controlled state, and accessibility prop getters.

npx shadcn@latest add https://ui.retab.com/r/dropzone.json
File Uploader ui

A polished Retab document upload area built from the headless Dropzone primitive and File Thumbnail.

npx shadcn@latest add https://ui.retab.com/r/file-uploader.json
File Size Format ui

A small byte-size display formatter for file UI components.

npx shadcn@latest add https://ui.retab.com/r/file-size-format.json
Input ui

A styled text input built on Base UI.

npx shadcn@latest add https://ui.retab.com/r/input.json
Label ui

An accessible label primitive.

npx shadcn@latest add https://ui.retab.com/r/label.json
Form ui

React Hook Form field primitives with accessible labels, descriptions, and messages.

npx shadcn@latest add https://ui.retab.com/r/form.json
Data Cell ui

A lightweight editable cell for scalar document data: text, numbers, booleans, dates, times, and date-times.

npx shadcn@latest add https://ui.retab.com/r/data-cell.json
Calendar ui

A calendar component built on React DayPicker.

npx shadcn@latest add https://ui.retab.com/r/calendar.json
Group ui

A connected control group primitive for buttons, inputs, separators, and text addons.

npx shadcn@latest add https://ui.retab.com/r/group.json
JSON Inspector ui

A read-only JSON viewer with theme-aware syntax highlighting and a hover copy button, plus a standalone CopyButton.

npx shadcn@latest add https://ui.retab.com/r/json-inspector.json
Kbd ui

A keyboard shortcut display primitive.

npx shadcn@latest add https://ui.retab.com/r/kbd.json
Scroll Area ui

A custom scroll area built on Base UI.

npx shadcn@latest add https://ui.retab.com/r/scroll-area.json
Switch ui

A two-state toggle switch.

npx shadcn@latest add https://ui.retab.com/r/switch.json
Table ui

Semantic table primitives for structured data.

npx shadcn@latest add https://ui.retab.com/r/table.json
Textarea ui

A styled multiline text input.

npx shadcn@latest add https://ui.retab.com/r/textarea.json
Sidebar Row ui

Shared sidebar row button styling variants used by app and providerless sidebar primitives.

npx shadcn@latest add https://ui.retab.com/r/sidebar-row.json
Sidebar ui

A responsive application sidebar with menu, rail, and provider primitives.

npx shadcn@latest add https://ui.retab.com/r/sidebar.json
Sidebar List ui

Providerless sidebar list primitives for embedded viewer and domain sidebars.

npx shadcn@latest add https://ui.retab.com/r/sidebar-list.json
Skeleton ui

A loading placeholder with shimmer animation.

npx shadcn@latest add https://ui.retab.com/r/skeleton.json
Sonner ui

A themed toast provider for Sonner.

npx shadcn@latest add https://ui.retab.com/r/sonner.json
Spinner ui

A compact loading spinner using Lucide.

npx shadcn@latest add https://ui.retab.com/r/spinner.json
Resizable ui

Resizable panel primitives using react-resizable-panels.

npx shadcn@latest add https://ui.retab.com/r/resizable.json
CSV parser lib

A small, dependency-free RFC 4180-ish CSV/TSV parser returning a header and rectangular rows.

npx shadcn@latest add https://ui.retab.com/r/csv.json
PDF Document Resource lib

Load and cache PDF.js documents and pages without viewer chrome.

npx shadcn@latest add https://ui.retab.com/r/pdf-document-resource.json
DOCX Document Resource lib

Load and cache DOCX bytes without viewer chrome.

npx shadcn@latest add https://ui.retab.com/r/docx-document-resource.json
CSV Viewer ui

A fixed-window virtualized CSV/TSV table: sortable columns, sticky header, row numbers, horizontal scroll. Renders straight from raw rows (no table row model) …

npx shadcn@latest add https://ui.retab.com/r/csv-viewer.json
PDF Viewer ui

A pdfjs-backed PDF viewer: continuous scroll, controlled or uncontrolled zoom, rotate, fit-to-width, download, a per-page overlay slot for bounding-box citatio…

npx shadcn@latest add https://ui.retab.com/r/pdf-viewer.json
DOCX Viewer ui

A docx-preview-backed Word viewer: faithful paginated pages, continuous scroll, zoom, fit-to-width, and download. Off-screen pages are skipped via CSS content-…

npx shadcn@latest add https://ui.retab.com/r/docx-viewer.json
Image Viewer ui

A performant image viewer with native off-thread decode (createImageBitmap), continuous scroll, zoom, rotate, fit-to-width, download, and a per-frame overlay s…

npx shadcn@latest add https://ui.retab.com/r/image-viewer.json
Layout Blocks ui

A provider-agnostic layout inspection component for OCR output: normalize Google Document AI, AWS Textract, or Azure Document Intelligence into shared blocks, …

npx shadcn@latest add https://ui.retab.com/r/layout-blocks.json
PPTX Viewer ui

A canvas-backed PowerPoint viewer rendered entirely client-side (no server conversion): continuous scroll, zoom, rotate, fit-to-width, download, and a per-slid…

npx shadcn@latest add https://ui.retab.com/r/pptx-viewer.json
XLSX worker protocol lib

Typed worker messages, parse limits, and error codes for the XLSX viewer.

npx shadcn@latest add https://ui.retab.com/r/xlsx-worker-protocol.json
XLSX workbook model lib

Sparse compact workbook helpers for the XLSX viewer: cell lookup, metadata projection, column labels, and bounded source caching.

npx shadcn@latest add https://ui.retab.com/r/xlsx-workbook.json
XLSX SheetJS flattener lib

Pure SheetJS-to-compact-sheet flattening helpers for the XLSX viewer worker.

npx shadcn@latest add https://ui.retab.com/r/xlsx-sheetjs-flattener.json
XLSX Viewer ui

A fixed-window virtualized Excel/spreadsheet viewer rendered entirely client-side: sheet tabs, zoom, download, formatted values, numeric alignment, sparse work…

npx shadcn@latest add https://ui.retab.com/r/xlsx-viewer.json
File Viewer ui

One viewer for any file: detects the type and lazy-loads the matching renderer (PDF, DOCX, XLSX, PPTX, CSV, images) plus inline, virtualized text/code/JSON, Ma…

npx shadcn@latest add https://ui.retab.com/r/file-viewer.json
File System ui

A document workspace over a flat object-store manifest with list, grid, columns, lazy folders, generated thumbnails, and FileViewer previews.

npx shadcn@latest add https://ui.retab.com/r/file-system.json
File System Light ui

A minimal file tree in a ViewerSidebar with FileViewer in the ViewerSurface.

npx shadcn@latest add https://ui.retab.com/r/file-system-light.json
Document source model lib

Viewer-agnostic model for extraction sources (the Retab /v1/extractions/{id}/sources shape): SourceAnchor union (pdf_bbox, image_bbox, spreadsheet/csv cell, do…

npx shadcn@latest add https://ui.retab.com/r/document-source.json
PDF source adapter ui

Bridges the document-source model to the PDF viewer: pdfAnchorToTarget and renderPdfSourceOverlay for PDF bbox anchors.

npx shadcn@latest add https://ui.retab.com/r/pdf-source.json
Segments model lib

Shared model + helpers for page-segmented results (partition/split): Segment type, Tableau palette, color map, page-range and confidence helpers.

npx shadcn@latest add https://ui.retab.com/r/segments.json
Segment Interaction lib

React-free hover, focus, selection, and current-page helpers for Segment[] surfaces.

npx shadcn@latest add https://ui.retab.com/r/segment-interaction.json
useSegmentInteraction ui

Client hook that coordinates hover, focus, and persistent selection across Segment[] surfaces.

npx shadcn@latest add https://ui.retab.com/r/use-segment-interaction.json
Segment Legend ui

Compact color legend for a Segment[] with shared hover, focus, and selection state.

npx shadcn@latest add https://ui.retab.com/r/segment-legend.json
Segment Sidebar ui

Selectable list of segments with page ranges and confidence bars.

npx shadcn@latest add https://ui.retab.com/r/segment-sidebar.json
Page Timeline ui

A colored page strip that ties a Segment[] to the document; hover/select syncing and click-to-jump.

npx shadcn@latest add https://ui.retab.com/r/page-timeline.json
Page Ribbon ui

A page-axis ribbon: segments drawn as blocks spanning their pages. One vertical lane = a split sidebar; many horizontal rows (consensus + votes) = a partition …

npx shadcn@latest add https://ui.retab.com/r/page-ribbon.json
Segment Page Rail ui

Vertical page rail for Segment[] documents with current-page following, scroll progress, and page selection.

npx shadcn@latest add https://ui.retab.com/r/segment-page-rail.json
Segmented Document ui

Shared segmented-document model, provider, viewport controller, and anchor navigation for split, partition, source, OCR, and bbox viewers.

npx shadcn@latest add https://ui.retab.com/r/segmented-document.json
Schema Builder ui

Controlled JSON Schema editor for building Retab extraction schemas — fields, types, nested objects, arrays, enums, and required flags.

npx shadcn@latest add https://ui.retab.com/r/schema-builder.json
Attachment Sidebar ui

File attachment navigator built from SidebarList primitives and FileThumbnail.

npx shadcn@latest add https://ui.retab.com/r/attachment-sidebar.json
Email Viewer ui

Render recursive MIME messages with headers, CID inline resources, nested messages, and File Viewer leaves.

npx shadcn@latest add https://ui.retab.com/r/email-viewer.json
File Thumbnail Frame ui

Dependency-free thumbnail frame with a loading shimmer, fade-in, and muted fallback surface.

npx shadcn@latest add https://ui.retab.com/r/file-thumbnail-frame.json
File Thumbnail ui

Render complete file thumbnails from browser files, URLs, blobs, text sources, external images, or custom preview content.

npx shadcn@latest add https://ui.retab.com/r/file-thumbnail.json
Run Card ui

A document run card: a file thumbnail with a status pill, a heading, and a result slot. Composes file-thumbnail; the result rendering is left to its children.

npx shadcn@latest add https://ui.retab.com/r/run-card.json
OCR block

OCR review for a scanned document: source page, detected text blocks, confidence filtering, and matching polygon overlays. Switch between Google Document AI, A…

npx shadcn@latest add https://ui.retab.com/r/ocr-block.json
Split Viewer block

Named subdocuments over a PDF: a legend header and a vertical page-ribbon sidebar, from the shared segment primitives.

npx shadcn@latest add https://ui.retab.com/r/split-viewer-block.json
Partition Viewer block

Keyed chunks over a PDF: a legend plus a horizontal page-ribbon waterfall, from the shared segment primitives.

npx shadcn@latest add https://ui.retab.com/r/partition-viewer-block.json
Parse Viewer block

The source document beside its extracted markdown, synced by page, with a Rendered/Text toggle.

npx shadcn@latest add https://ui.retab.com/r/parse-viewer-block.json
Edit Viewer block

Detected form fields beside a PDF source document, linked by their bbox — hover or select a field to highlight its region on the page; Preview stamps values ov…

npx shadcn@latest add https://ui.retab.com/r/edit-viewer-block.json
Excel Splitting block

One Excel workbook fanned out into several clean CSVs — each reconstructed table rendered in the viewer, with a sidebar listing every CSV the splitter emitted,…

npx shadcn@latest add https://ui.retab.com/r/excel-splitting-viewer-block.json
Text Splitting block

One plain-text batch file separated into several documents — each carved-out document rendered in the viewer, with a left sidebar listing the source file first…

npx shadcn@latest add https://ui.retab.com/r/txt-splitting-viewer-block.json
Extract Viewer block

Extracted data beside the source PDF, rendered as a JSON form and linked by sources — hover or select a field to highlight where its value came from and scroll…

npx shadcn@latest add https://ui.retab.com/r/extract-viewer-block.json
Sources Viewer block

Every source-backed format in one viewer — PDF/image bbox sources use segmented-document anchors; text, CSV, Excel, and Word use segmented source links with fo…

npx shadcn@latest add https://ui.retab.com/r/sources-viewer-block.json
JSON Form Sources block

Extraction rendered as a JSON form beside the source PDF — hover a form field to highlight where its value came from through segmented-document state.

npx shadcn@latest add https://ui.retab.com/r/json-form-sources-block.json
PDF Viewer Thumbnails ui

PDF-owned page thumbnail navigation for explicit PdfViewer composition: lazy pdfjs thumbnails, active-page highlight, and click-to-jump.

npx shadcn@latest add https://ui.retab.com/r/pdf-viewer-thumbnails.json
Dropzone block

A file-uploader lab proving the headless dropzone primitive across default, non-button, native-button, controlled, validation-only, custom grid, upload progres…

npx shadcn@latest add https://ui.retab.com/r/dropzone-block.json
File System block

A document workspace over a flat object-store manifest with list, grid, columns, generated thumbnails, and persistent file previews.

npx shadcn@latest add https://ui.retab.com/r/file-system-block.json
File System Light block

A purified composition experiment: file tree in a ViewerSidebar, selected source rendered by FileViewer in a ViewerSurface.

npx shadcn@latest add https://ui.retab.com/r/fslight-block.json
Primitive Run Card Components ui

Prop-driven run cards for each Retab primitive — classify, split, partition, parse, and extract — each framing the source document with that primitive's result…

npx shadcn@latest add https://ui.retab.com/r/primitive-run-cards.json
Primitive Run Cards block

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 …

npx shadcn@latest add https://ui.retab.com/r/primitive-cards-block.json
PDF Thumbnails block

A PDF viewer with toggleable page thumbnails in a viewer navigation rail.

npx shadcn@latest add https://ui.retab.com/r/pdf-thumbnails-block.json
Source field list ui

A field list that drives source-field interaction: hover previews the field location in the viewer, click selects it.

npx shadcn@latest add https://ui.retab.com/r/source-field-list.json
Source field link ui

A field-path adapter over segmented-document anchors.

npx shadcn@latest add https://ui.retab.com/r/source-field-link.json
Document anchor ui

Pure document location types used by evidence projection and viewer target adapters.

npx shadcn@latest add https://ui.retab.com/r/document-anchor.json
Document evidence ui

Pure projection types for semantic evidence rows that can resolve to document anchors.

npx shadcn@latest add https://ui.retab.com/r/document-evidence.json
Interactive item list ui

A virtualized listbox interaction primitive for preview, selection, keyboard navigation, and visible-item reporting.

npx shadcn@latest add https://ui.retab.com/r/interactive-item-list.json
Source evidence ui

Projection helpers that convert document sources, source maps, and source fields into evidence rows with resolved document anchors.

npx shadcn@latest add https://ui.retab.com/r/source-evidence.json
Source segmented document ui

Projection helpers and overlays that convert PDF/image bbox document sources into segmented-document segments, anchors, and active source highlights.

npx shadcn@latest add https://ui.retab.com/r/source-segmented-document.json
Layout blocks segmented document ui

Projection helpers that convert OCR/layout blocks into segmented-document segments and anchors.

npx shadcn@latest add https://ui.retab.com/r/layout-blocks-segmented-document.json
Source anchor ui

Pure conversion from document-source anchors to document viewer anchors.

npx shadcn@latest add https://ui.retab.com/r/source-anchor.json
Image source adapter ui

Bridges the document-source model to the image viewer: imageAnchorToTarget, rotateImageArea, and renderImageSourceOverlay for image_bbox anchors.

npx shadcn@latest add https://ui.retab.com/r/image-source.json
Code Viewer ui

A fixed-line code and log viewer with line numbers, custom virtualization, source-line highlights, retry, zoom, and download.

npx shadcn@latest add https://ui.retab.com/r/code-viewer.json
Text Viewer ui

A Pretext-powered prose viewer with natural wrapping, custom variable-height virtualization, source-line highlights, retry, zoom, and download.

npx shadcn@latest add https://ui.retab.com/r/text-viewer.json
Chenglou Text Viewer ui

An imperative Pretext prose viewer that keeps Text Viewer parsing/layout but projects visible rows through a Chenglou-style DOM cache.

npx shadcn@latest add https://ui.retab.com/r/text-viewer-chenglou.json
Markdown Viewer ui

A continuous Markdown viewer forked from the Chenglou Pretext text viewer, with block virtualization and no visible page model.

npx shadcn@latest add https://ui.retab.com/r/markdown-viewer.json
Text source adapter ui

Bridges the document-source model to text viewers: textAnchorToTarget and sourceToTextHighlight for text_span anchors.

npx shadcn@latest add https://ui.retab.com/r/text-source.json
CSV source adapter ui

Bridges the document-source model to the CSV viewer: csvAnchorToTarget and sourceToCsvCell for csv_cell anchors.

npx shadcn@latest add https://ui.retab.com/r/csv-source.json
Excel source adapter ui

Bridges the document-source model to the XLSX viewer: xlsxAnchorToTarget and sourceToXlsxCell for spreadsheet_cell anchors.

npx shadcn@latest add https://ui.retab.com/r/xlsx-source.json
DOCX source adapter ui

Bridges the document-source model to the DOCX viewer: docxAnchorToTarget and sourceToDocxHighlight for docx_text_span and docx_table_cell anchors.

npx shadcn@latest add https://ui.retab.com/r/docx-source.json
Image Sources block

Extracted fields linked to a scanned page image — hover to highlight the image_bbox region.

npx shadcn@latest add https://ui.retab.com/r/image-sources-block.json
Text Sources block

Values extracted from a log file linked to the lines they came from — hover to highlight a line range.

npx shadcn@latest add https://ui.retab.com/r/text-sources-block.json
DOCX Sources block

Values extracted from a Word document linked back to where they came from — hover to highlight the text and scroll to it.

npx shadcn@latest add https://ui.retab.com/r/docx-sources-block.json
CSV Sources block

Extracted values linked to spreadsheet cells — hover to highlight a cell and scroll to it.

npx shadcn@latest add https://ui.retab.com/r/csv-sources-block.json
Excel Sources block

Extracted values linked to spreadsheet cells across sheets — hover to switch sheet, highlight the cell, and scroll to it.

npx shadcn@latest add https://ui.retab.com/r/xlsx-sources-block.json
Source indicator ui

A floating pill that reports active field source state over a viewer: nothing selected, a located field path, or a field with no source.

npx shadcn@latest add https://ui.retab.com/r/source-indicator.json
Default File Uploader block

The standard visual file uploader built on the headless dropzone primitive.

npx shadcn@latest add https://ui.retab.com/r/dropzone-file-uploader-example.json
Uploader + Viewer block

One upload surface that becomes a file viewer, with the uploaded blob rendered by FileViewer.

npx shadcn@latest add https://ui.retab.com/r/dropzone-file-viewer-example.json
Non-Button Trigger block

A custom element opens the file dialog while preserving dropzone state.

npx shadcn@latest add https://ui.retab.com/r/dropzone-non-button-trigger.json
Native Button Queue block

A real button trigger with browser button semantics and a small selected-file queue.

npx shadcn@latest add https://ui.retab.com/r/dropzone-native-button-queue.json
Controlled Queue block

Parent-owned file state with controlled selected files and explicit clear behavior.

npx shadcn@latest add https://ui.retab.com/r/dropzone-controlled-queue.json
Validation Only block

Validate accepted files and rejection details without storing selected files.

npx shadcn@latest add https://ui.retab.com/r/dropzone-validation-only.json
Custom Thumbnail Grid block

Direct useDropzone composition with FileThumbnail previews in a custom grid.

npx shadcn@latest add https://ui.retab.com/r/dropzone-custom-thumbnail-grid.json
Media Transcript Queue block

Audio and video files queued as transcript jobs with per-file thumbnails.

npx shadcn@latest add https://ui.retab.com/r/dropzone-media-transcript-queue.json
Upload Progress Queue block

A dropzone-backed upload queue with per-file loading bars keyed by the admitted file ids.

npx shadcn@latest add https://ui.retab.com/r/dropzone-upload-progress-queue.json
Avatar Image Slot block

A single replaceable image slot with a custom circular preview.

npx shadcn@latest add https://ui.retab.com/r/dropzone-avatar-image-slot.json
Spreadsheet Import block

A single spreadsheet upload feeding a mapping workflow.

npx shadcn@latest add https://ui.retab.com/r/dropzone-spreadsheet-import-card.json
Evidence Timeline block

Files become ordered evidence events inside a custom surface.

npx shadcn@latest add https://ui.retab.com/r/dropzone-evidence-timeline.json
Comparison Pair block

Two independent dropzones model original versus revision documents.

npx shadcn@latest add https://ui.retab.com/r/dropzone-comparison-pair-upload.json
Intake Router block

One intake target routes selected files into document, image, and table lanes.

npx shadcn@latest add https://ui.retab.com/r/dropzone-intake-router.json
Required Packet block

Slot-level dropzones for checklist-driven packet collection.

npx shadcn@latest add https://ui.retab.com/r/dropzone-required-packet-slots.json
Pinboard Drop Surface block

A full canvas trigger that pins dropped files as cards.

npx shadcn@latest add https://ui.retab.com/r/dropzone-pinboard-drop-surface.json
Disabled Dropzone block

Disabled input, trigger focus, intake, and drag behavior.

npx shadcn@latest add https://ui.retab.com/r/dropzone-disabled-dropzone.json
Split Consensus block

A split result with multi-run consensus visible in the sidebar: the page rail stays beside output-level likelihoods and each vote used to build the final split.

npx shadcn@latest add https://ui.retab.com/r/split-consensus-viewer-block.json
Split Consensus Diagram Horizontal block

A split consensus segment diagram with consolidation, five raw votes, and contested-page density in a wide horizontal sidebar beside the PDF.

npx shadcn@latest add https://ui.retab.com/r/split-consensus-diagram-horizontal-viewer-block.json
Split Consensus Diagram Vertical block

A split consensus segment diagram with the page axis running vertically for a narrow sidebar beside the PDF.

npx shadcn@latest add https://ui.retab.com/r/split-consensus-diagram-vertical-viewer-block.json
Split Consensus Lukas block

The split benchmark diagram from Lukas Bjorkland's article, with GT, Split v1, Split v2, the PDF pane, and the same dark metrics table treatment.

npx shadcn@latest add https://ui.retab.com/r/split-consensus-lukas-viewer-block.json
Classify Consensus block

A classification result with consensus visible in the sidebar: selected category, likelihood, and every vote beside the source document.

npx shadcn@latest add https://ui.retab.com/r/classify-consensus-viewer-block.json