Skip to main content

​
What are Retab Widgets?

Retab Widgets (@retab/react) is a React component library that provides drop-in UI components for document extraction workflows. Instead of building extraction interfaces from scratch, you can use pre-built, customizable components that handle:
  • Document viewing - PDF rendering, image zoom, field highlighting
  • Data display - Form, table, and code views for extracted data
  • Human-in-the-loop review - Complete interfaces for reviewing and editing extractions
  • File uploads - Drag-and-drop uploading with progress tracking
These components are designed to work seamlessly with the Retab API and can be integrated into any React application.

​
Key Features

Drop-in Components

Pre-built UI components that work out of the box with minimal configuration.

Real-time Streaming

Watch extractions populate in real-time as the AI processes your documents.

Human Review

Built-in support for human-in-the-loop workflows with draft editing and approval flows.

Customizable

Control visibility, behavior, and styling to match your application’s needs.

​
Installation

Install the package using your preferred package manager: 
npm install @retab/react
Import the required styles in your application’s root layout or entry point:
layout.tsx
import "@retab/react/styles.css";

​
Architecture

The widget library uses a provider pattern. Wrap your application (or the portion that needs Retab functionality) with RetabProvider:
providers.tsx
import { RetabProvider } from "@retab/react";
import "@retab/react/styles.css";

export default function App({ children }) {
  return (
    <RetabProvider
      projectId="proj_xxx"
      authConfig={{
        getToken: async () => {
          // Fetch a session token from your backend
          const response = await fetch("/api/retab/token");
          const { token } = await response.json();
          return token;
        },
        baseUrl: "https://api.retab.com",
      }}
    >
      {children}
    </RetabProvider>
  );
}
The provider handles:
  • Authentication - Token management and API requests
  • Project context - Loading project configuration and JSON schema
  • Extractions state - Managing extraction lists and selection
  • OCR context - Field location detection for source highlighting

​
Available Components

ComponentDescription
DataComponentDisplay and edit extracted data in form, table, or code view
FileComponentPreview documents with PDF rendering, image zoom, and field highlighting
ExtractionsListBrowse extractions with search, filters, and pagination
ExtractionReviewerComplete review interface combining list, file preview, and data editor
ExtractionComponentSide-by-side file preview and data display with resizable panels
UploadJobsListUpload files and track processing jobs

​
Next Steps

Widgets Reference

Detailed documentation for each component with props and examples.

Hooks Reference

React hooks for accessing Retab context and data.

Next.js Quickstart

Step-by-step guide to integrate widgets in a Next.js application.