retab Components — Preview & Copy | 21st

retab

by retab-dev

1component

Installs all 97 components. Without our CLI, run instead.

Auto-indexed

Interactive Item List

That's all 1 components

About retab

retab publishes a shadcn registry at ui.retab.com, with 97 components installable through the shadcn CLI.

Components: 97
GitHub stars: 11
Last commit: Sep 1, 2026
Repository: retab-dev/retab-ui

Also in the retab registry

Copy a prompt for your agent, copy the install command, or open the docs that ship it.

Attachment Sidebar
attachment-sidebar
File attachment navigator built from SidebarList primitives and FileThumbnail.
lucide-react1 file
Autocomplete
An autocomplete input built on Base UI primitives.
@base-ui/react@^1.4.1, lucide-react1 file
Classify Consensus
classify-consensus-viewer-block
A classification result with consensus visible in the sidebar: selected category, likelihood, and every vote beside the source document.
lucide-react4 files
Code Viewer
code-viewer
A fixed-line code and log viewer with line numbers, custom virtualization, source-line highlights, retry, zoom, and download.
lucide-react, prismjs@^1.30.032 files
CSV source adapter
csv-source
Bridges the document-source model to the CSV viewer: csvAnchorToTarget and sourceToCsvCell for csv_cell anchors.
document-source1 file
CSV Sources
csv-sources-block
Extracted values linked to spreadsheet cells — hover to highlight a cell and scroll to it.
document-source2 files
CSV Viewer
csv-viewer
A fixed-window virtualized CSV/TSV table: sortable columns, sticky header, row numbers, horizontal scroll. Renders straight from raw rows (no table row model) so it stays flat in memory on huge files.
lucide-react36 files
Data Cell
data-cell
A lightweight editable cell for scalar document data: text, numbers, booleans, dates, times, and date-times.
@chenglou/pretext@^0.0.8, lucide-react@^0.460.030 files
Document anchor
document-anchor
Pure document location types used by evidence projection and viewer target adapters.
1 file
Document evidence
document-evidence
Pure projection types for semantic evidence rows that can resolve to document anchors.
1 file
DOCX source adapter
docx-source
Bridges the document-source model to the DOCX viewer: docxAnchorToTarget and sourceToDocxHighlight for docx_text_span and docx_table_cell anchors.
document-source1 file
DOCX Sources
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.
document-source2 files
DOCX Viewer
docx-viewer
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-visibility.
lucide-react, docx-preview31 files
Dropzone
A headless file-intake primitive with drag/drop, file input wiring, validation, controlled state, and accessibility prop getters.
@radix-ui/react-slot@^1.1.12 files
Avatar Image Slot
dropzone-avatar-image-slot
A single replaceable image slot with a custom circular preview.
lucide-react2 files
Dropzone
dropzone-block
A file-uploader lab proving the headless dropzone primitive across default, non-button, native-button, controlled, validation-only, custom grid, upload progress, uploader-viewer, and disabled surfaces.
lucide-react26 files
Comparison Pair
dropzone-comparison-pair-upload
Two independent dropzones model original versus revision documents.
lucide-react2 files
Controlled Queue
dropzone-controlled-queue
Parent-owned file state with controlled selected files and explicit clear behavior.
lucide-react2 files
Custom Thumbnail Grid
dropzone-custom-thumbnail-grid
Direct useDropzone composition with FileThumbnail previews in a custom grid.
lucide-react2 files
Disabled Dropzone
dropzone-disabled-dropzone
Disabled input, trigger focus, intake, and drag behavior.
lucide-react@^0.460.02 files
Evidence Timeline
dropzone-evidence-timeline
Files become ordered evidence events inside a custom surface.
lucide-react2 files
Intake Router
dropzone-intake-router
One intake target routes selected files into document, image, and table lanes.
lucide-react2 files
Media Transcript Queue
dropzone-media-transcript-queue
Audio and video files queued as transcript jobs with per-file thumbnails.
lucide-react2 files
Native Button Queue
dropzone-native-button-queue
A real button trigger with browser button semantics and a small selected-file queue.
lucide-react2 files
Non-Button Trigger
dropzone-non-button-trigger
A custom element opens the file dialog while preserving dropzone state.
lucide-react2 files
Pinboard Drop Surface
dropzone-pinboard-drop-surface
A full canvas trigger that pins dropped files as cards.
lucide-react@^0.460.02 files
Required Packet
dropzone-required-packet-slots
Slot-level dropzones for checklist-driven packet collection.
lucide-react@^0.460.02 files
Spreadsheet Import
dropzone-spreadsheet-import-card
A single spreadsheet upload feeding a mapping workflow.
lucide-react2 files
Upload Progress Queue
dropzone-upload-progress-queue
A dropzone-backed upload queue with per-file loading bars keyed by the admitted file ids.
lucide-react2 files
Validation Only
dropzone-validation-only
Validate accepted files and rejection details without storing selected files.
lucide-react2 files
Edit Viewer
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 over the source, and Filled renders a supplied output file.
lucide-react18 files
Email Viewer
email-viewer
Render recursive MIME messages with headers, CID inline resources, nested messages, and File Viewer leaves.
lucide-react7 files
Excel Splitting
excel-splitting-viewer-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, the sheet it was carved from, and how it was reconstructed. Selecting one opens that CSV.
lucide-react2 files
Extract Viewer
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 the page to it.
react-hook-form, @radix-ui/react-checkbox@^1.1.3, @radix-ui/react-label@^2.1.1, @radix-ui/react-slot@^1.1.136 files
File Size Format
file-size-format
A small byte-size display formatter for file UI components.
1 file
File System
file-system
A document workspace over a flat object-store manifest with list, grid, columns, lazy folders, generated thumbnails, and FileViewer previews.
lucide-react, @pierre/trees@1.0.0-beta.429 files
File System
file-system-block
A document workspace over a flat object-store manifest with list, grid, columns, generated thumbnails, and persistent file previews.
lucide-react, @pierre/trees2 files
File System Light
file-system-light
A minimal file tree in a ViewerSidebar with FileViewer in the ViewerSurface.
@pierre/trees, lucide-react@^0.460.03 files
File Thumbnail
file-thumbnail
Render complete file thumbnails from browser files, URLs, blobs, text sources, external images, or custom preview content.
@e965/xlsx@0.20.3, dompurify@^3.3.3, marked@^15.0.12, @kenjiuno/msgreader@^1.28.046 files
File Thumbnail Frame
file-thumbnail-frame
Dependency-free thumbnail frame with a loading shimmer, fade-in, and muted fallback surface.
utils, effect-key6 files
File Uploader
file-uploader
A polished Retab document upload area built from the headless Dropzone primitive and File Thumbnail.
lucide-react1 file1 example
File Viewer
file-viewer
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, Markdown (sandboxed), and HTML (sandboxed). Only the needed parser is ever downloaded.
lucide-react, marked@18.0.5, dompurify@3.4.9, @radix-ui/react-slot@^1.1.149 files1 example
File System Light
fslight-block
A purified composition experiment: file tree in a ViewerSidebar, selected source rendered by FileViewer in a ViewerSurface.
@pierre/trees1 file
Group
A connected control group primitive for buttons, inputs, separators, and text addons.
@base-ui/react@^1.4.1, class-variance-authority@^0.7.11 file
Image source adapter
image-source
Bridges the document-source model to the image viewer: imageAnchorToTarget, rotateImageArea, and renderImageSourceOverlay for image_bbox anchors.
document-source2 files
Image Sources
image-sources-block
Extracted fields linked to a scanned page image — hover to highlight the image_bbox region.
document-source2 files
Image Viewer
image-viewer
A performant image viewer with native off-thread decode (createImageBitmap), continuous scroll, zoom, rotate, fit-to-width, download, and a per-frame overlay slot. Renders multi-page TIFF scans efficiently: frames decode lazily near the viewport and decoded bitmaps are capped. No useEffect.
lucide-react, utif@3.1.033 files
JSON Form Sources
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.
react-hook-form, @radix-ui/react-checkbox@^1.1.3, @radix-ui/react-label@^2.1.1, @radix-ui/react-slot@^1.1.136 files
JSON Inspector
json-inspector
A read-only JSON viewer with theme-aware syntax highlighting and a hover copy button, plus a standalone CopyButton.
lucide-react2 files
Kbd
A keyboard shortcut display primitive.
utils1 file
Layout Blocks
layout-blocks
A provider-agnostic layout inspection component for OCR output: normalize Google Document AI, AWS Textract, or Azure Document Intelligence into shared blocks, lines, and words, then review them over the source page with virtualized rows, confidence filtering, and precise overlays.
utils13 files
Layout blocks segmented document
layout-blocks-segmented-document
Projection helpers that convert OCR/layout blocks into segmented-document segments and anchors.
1 file
Markdown Viewer
markdown-viewer
A continuous Markdown viewer forked from the Chenglou Pretext text viewer, with block virtualization and no visible page model.
@chenglou/pretext, hast-util-to-jsx-runtime, katex, lucide-react50 files
OCR
ocr-block
OCR review for a scanned document: source page, detected text blocks, confidence filtering, and matching polygon overlays. Switch between Google Document AI, AWS Textract, and Azure Document Intelligence output.
4 files
Page Ribbon
page-ribbon
A page-axis ribbon: segments drawn as blocks spanning their pages. One vertical lane = a split sidebar; many horizontal rows (consensus + votes) = a partition waterfall. Shared hover/focus/selection + click-to-jump.
segments, segment-interaction, utils2 files
Page Timeline
page-timeline
A colored page strip that ties a Segment[] to the document; hover/select syncing and click-to-jump.
segments, segment-interaction, utils1 file
Parse Viewer
parse-viewer-block
The source document beside its extracted markdown, synced by page, with a Rendered/Text toggle.
lucide-react, react-markdown, remark-gfm, rehype-raw23 files
Partition Viewer
partition-viewer-block
Keyed chunks over a PDF: a legend plus a horizontal page-ribbon waterfall, from the shared segment primitives.
lucide-react4 files
PDF source adapter
pdf-source
Bridges the document-source model to the PDF viewer: pdfAnchorToTarget and renderPdfSourceOverlay for PDF bbox anchors.
document-source1 file
PDF Thumbnails
pdf-thumbnails-block
A PDF viewer with toggleable page thumbnails in a viewer navigation rail.
lucide-react10 files
PDF Viewer
pdf-viewer
A pdfjs-backed PDF viewer: continuous scroll, controlled or uncontrolled zoom, rotate, fit-to-width, download, a per-page overlay slot for bounding-box citations, a PdfHighlight overlay, and imperative scrollToPage / scrollToPageArea handles for driving source highlights.
lucide-react39 files
PDF Viewer Thumbnails
pdf-viewer-thumbnails
PDF-owned page thumbnail navigation for explicit PdfViewer composition: lazy pdfjs thumbnails, active-page highlight, and click-to-jump.
utils9 files
PPTX Viewer
pptx-viewer
A canvas-backed PowerPoint viewer rendered entirely client-side (no server conversion): continuous scroll, zoom, rotate, fit-to-width, download, and a per-slide overlay slot. Slides render lazily near the viewport and renders are serialized.
lucide-react@^0.514.0, pptxviewjs@1.1.9, chart.js@^4.5.031 files
Primitive Run Cards
primitive-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 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.
6 files
Primitive Run Card Components
primitive-run-cards
Prop-driven run cards for each Retab primitive — classify, split, partition, parse, and extract — each framing the source document with that primitive's result over the shared RunCard shell. Presentational: pass the resolved result (category, segments, markdown, or extract fields), so the same cards render a static demo or a live workflow run's per-block result.
react-markdown@^10.1.0, remark-gfm@^4.0.11 file
Run Card
run-card
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.
lucide-react@^0.514.01 file
Schema Builder
schema-builder
Controlled JSON Schema editor for building Retab extraction schemas — fields, types, nested objects, arrays, enums, and required flags.
ajv@^8.17.1, ajv-errors@^3.0.0, ajv-formats@^3.0.1, lucide-react@^0.460.0115 files
Segmented Document
segmented-document
Shared segmented-document model, provider, viewport controller, and anchor navigation for split, partition, source, OCR, and bbox viewers.
segments, segment-interaction, effect-key4 files
Segment Legend
segment-legend
Compact color legend for a Segment[] with shared hover, focus, and selection state.
segments, segment-interaction, utils2 files
Segment Page Rail
segment-page-rail
Vertical page rail for Segment[] documents with current-page following, scroll progress, and page selection.
segments, segment-interaction, utils1 file
Segment Sidebar
segment-sidebar
Selectable list of segments with page ranges and confidence bars.
segments, segment-interaction, utils2 files
Sidebar List
sidebar-list
Providerless sidebar list primitives for embedded viewer and domain sidebars.
@base-ui/react@^1.4.11 file
Sidebar Row
sidebar-row
Shared sidebar row button styling variants used by app and providerless sidebar primitives.
class-variance-authority@^0.7.11 file
Source anchor
source-anchor
Pure conversion from document-source anchors to document viewer anchors.
document-source1 file
Source evidence
source-evidence
Projection helpers that convert document sources, source maps, and source fields into evidence rows with resolved document anchors.
document-source1 file
Source field link
source-field-link
A field-path adapter over segmented-document anchors.
1 file
Source field list
source-field-list
A field list that drives source-field interaction: hover previews the field location in the viewer, click selects it.
utils1 file
Source indicator
source-indicator
A floating pill that reports active field source state over a viewer: nothing selected, a located field path, or a field with no source.
lucide-react@^0.460.01 file
Source segmented document
source-segmented-document
Projection helpers and overlays that convert PDF/image bbox document sources into segmented-document segments, anchors, and active source highlights.
document-source2 files
Sources Viewer
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 format-specific target adapters.
react-hook-form, json-schema, @radix-ui/react-checkbox@^1.1.3, @radix-ui/react-label@^2.1.141 files
Spinner
A compact loading spinner using Lucide.
lucide-react@^0.514.01 file
Split Consensus Diagram Horizontal
split-consensus-diagram-horizontal-viewer-block
A split consensus segment diagram with consolidation, five raw votes, and contested-page density in a wide horizontal sidebar beside the PDF.
2 files
Split Consensus Diagram Vertical
split-consensus-diagram-vertical-viewer-block
A split consensus segment diagram with the page axis running vertically for a narrow sidebar beside the PDF.
2 files
Split Consensus Lukas
split-consensus-lukas-viewer-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.
effect-key3 files
Split Consensus
split-consensus-viewer-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.
lucide-react7 files
Split Viewer
split-viewer-block
Named subdocuments over a PDF: a legend header and a vertical page-ribbon sidebar, from the shared segment primitives.
lucide-react4 files
Text source adapter
text-source
Bridges the document-source model to text viewers: textAnchorToTarget and sourceToTextHighlight for text_span anchors.
document-source2 files
Text Sources
text-sources-block
Values extracted from a log file linked to the lines they came from — hover to highlight a line range.
document-source2 files
Text Viewer
text-viewer
A Pretext-powered prose viewer with natural wrapping, custom variable-height virtualization, source-line highlights, retry, zoom, and download.
@chenglou/pretext, hast-util-to-jsx-runtime, katex, lucide-react54 files
Chenglou Text Viewer
text-viewer-chenglou
An imperative Pretext prose viewer that keeps Text Viewer parsing/layout but projects visible rows through a Chenglou-style DOM cache.
2 files
Text Splitting
txt-splitting-viewer-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, then every document the splitter emitted, its type, line count, and the boundary cue that detected it. Selecting one opens that document.
lucide-react2 files
useSegmentInteraction
use-segment-interaction
Client hook that coordinates hover, focus, and persistent selection across Segment[] surfaces.
segment-interaction1 file
Viewer Controls
viewer-controls
A shared controls row for viewer chrome: title, position, zoom, rotate, download, loading, and extra controls.
lucide-react@^0.514.0, class-variance-authority@^0.7.1, radix-ui@^1.5.05 files
Excel source adapter
xlsx-source
Bridges the document-source model to the XLSX viewer: xlsxAnchorToTarget and sourceToXlsxCell for spreadsheet_cell anchors.
document-source1 file
Excel Sources
xlsx-sources-block
Extracted values linked to spreadsheet cells across sheets — hover to switch sheet, highlight the cell, and scroll to it.
document-source2 files
XLSX Viewer
xlsx-viewer
A fixed-window virtualized Excel/spreadsheet viewer rendered entirely client-side: sheet tabs, zoom, download, formatted values, numeric alignment, sparse workbook storage, and row + column virtualization so huge sheets stay smooth. No useEffect for data loading.
lucide-react, @e965/xlsx@0.20.339 files

From the retab readme

Retab UI

Retab UI is a shadcn registry for products where files, schemas, citations, and extracted data need to live in the same interface. Install the pieces you need as local React and Tailwind source, then adapt them inside your own design system.

The library focuses on the awkward surfaces generic UI kits usually skip: multi-format file rendering, OCR layout review, source-backed JSON fields, upload intake, thumbnail generation, schema editing, and workflow blocks for parse, extract, split, and partition results.

Project Map

Documentation: https://ui.retab.com/docs
Components: https://ui.retab.com/docs/components
Examples: https://ui.retab.com/examples
GitHub: retab-dev/retab-ui
Registry namespace: @retab/*

Install One Surface

Add a registry item with the shadcn CLI:

npx shadcn@latest add @retab/file-viewer

Render the generated component from your app:

import { FileViewerPreview } from "@/components/ui/file-viewer";

export default function Page() {
  return (
    
  );
}

The install writes source files into your repository. Keep the generated code as part of your app, and adjust aliases such as @/components/ui/file-viewer or @/components/blocks/ocr-block if your project uses a different layout.

Component Snapshots

Sources Viewer

Put extracted fields beside their evidence. PDF, image, text, CSV, Excel, and Word sources all use the same interaction model: focus a value, reveal the region, line, cell, or span behind it.

pnpm dlx shadcn@latest add @retab/sources-viewer-block

import { SourcesViewerBlock } from "@/components/blocks/sources-viewer-block";

export default function Page() {
  return ;
}

OCR

Inspect OCR output as a document, not as raw provider JSON. The block pairs the page image with normalized text blocks, confidence metadata, and provider switching for Google Document AI, AWS Textract, and Azure Document Intelligence.

pnpm dlx shadcn@latest add @retab/ocr-block

import { OcrBlock } from "@/components/blocks/ocr-block";

export default function Page() {
  return ;
}

File System

A document workspace over object-store manifests. List, grid, and column views share selection, lazy folders, generated thumbnails, and a persistent FileViewer preview.

pnpm dlx shadcn@latest add @retab/file-system-block

import { FileSystemBlock } from "@/components/blocks/file-system-block";

export default function Page() {
  return ;
}

File Thumbnail

Preview files before users open them. The thumbnail frame accepts files, URLs, blobs, inline text, generated preview images, and custom preview content.

npx shadcn@latest add @retab/file-thumbnail

import { FileThumbnail } from "@/components/ui/file-thumbnail";

export function InvoiceThumbnail() {
  return (
    
  );
}

Core Registry Items

npx shadcn@latest add @retab/file-viewer
npx shadcn@latest add @retab/pdf-viewer
npx shadcn@latest add @retab/docx-viewer
npx shadcn@latest add @retab/xlsx-viewer
npx shadcn@latest add @retab/file-thumbnail
npx shadcn@latest add @retab/dropzone
npx shadcn@latest add @retab/schema-builder
npx shadcn@latest add @retab/data-cell

Workflow Blocks

pnpm dlx shadcn@latest add @retab/sources-viewer-block
pnpm dlx shadcn@latest add @retab/ocr-block
pnpm dlx shadcn@latest add @retab/file-system-block
pnpm dlx shadcn@latest add @retab/parse-viewer-block
pnpm dlx shadcn@latest add @retab/split-viewer-block
pnpm dlx shadcn@latest add @retab/partition-viewer-block
pnpm dlx shadcn@latest add @retab/pdf-thumbnails-block

Run Locally

pnpm install
pnpm dev
pnpm registry:build
pnpm test
pnpm typecheck

The docs app runs at http://localhost:3100.

Maintainers

Retab UI is built by Retab.

License

Licensed under the MIT license.

Read the rest on GitHub →

What retab builds on

The packages and primitives its components pull in, counted across the registry.

utils68document-source18button17segments11separator11dropdown-menu10effect-key9segment-interaction7tooltip5csv3dialog3tabs3

Hooks and utilities

alert
alert-dialog
aspect-ratio
calendar
command
form
input
label
resizable
scroll-area
sidebar
skeleton
sonner
switch
table
textarea
use-keyed-layout-effect
use-keyed-mount-effect
use-mobile
use-mount-effect

What retab shipped recently

Every appearance and removal our crawl has seen in the registry index.

alertaddedAug 18, 2026
alert-dialogaddedAug 18, 2026
aspect-ratioaddedAug 18, 2026
attachment-sidebaraddedAug 18, 2026
autocompleteaddedAug 18, 2026
calendaraddedAug 18, 2026
classify-consensus-viewer-blockaddedAug 18, 2026
code-vieweraddedAug 18, 2026
commandaddedAug 18, 2026
csvaddedAug 18, 2026
csv-sourceaddedAug 18, 2026

Registries like retab

coss

by coss

components

ReUI

by Sean Hello

264

components

Dice UI

by Dice UI

components

Intent UI

by Intent UI

components

Bundui

by Shadcn UI Kit

components

Browse every shadcn registry we track →

retab contents

Interactive Item List

About retab

Also in the retab registry

Attachment Sidebar

Autocomplete

Classify Consensus

Code Viewer

CSV source adapter

CSV Sources

CSV Viewer

Data Cell

Document anchor

Document evidence

DOCX source adapter

DOCX Sources

DOCX Viewer

Dropzone

Avatar Image Slot

Dropzone

Comparison Pair

Controlled Queue

Custom Thumbnail Grid

Disabled Dropzone

Evidence Timeline

Intake Router

Media Transcript Queue

Native Button Queue

Non-Button Trigger

Pinboard Drop Surface

Required Packet

Spreadsheet Import

Upload Progress Queue

Validation Only

Edit Viewer

Email Viewer

Excel Splitting

Extract Viewer

File Size Format

File System

File System

File System Light

File Thumbnail

File Thumbnail Frame

File Uploader

File Viewer

File System Light

Group

Image source adapter

Image Sources

Image Viewer

JSON Form Sources

JSON Inspector

Kbd

Layout Blocks

Layout blocks segmented document

Markdown Viewer

OCR

Page Ribbon

Page Timeline

Parse Viewer

Partition Viewer

PDF source adapter

PDF Thumbnails

PDF Viewer

PDF Viewer Thumbnails

PPTX Viewer

Primitive Run Cards

Primitive Run Card Components

Run Card

Schema Builder

Segmented Document

Segment Legend

Segment Page Rail

Segment Sidebar

Sidebar List

Sidebar Row

Source anchor

Source evidence

Source field link