Introduction

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
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.

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

pnpm add @retab/react

yarn add @retab/react

bun add @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

Component	Description
`DataComponent`	Display and edit extracted data in form, table, or code view
`FileComponent`	Preview documents with PDF rendering, image zoom, and field highlighting
`ExtractionsList`	Browse extractions with search, filters, and pagination
`ExtractionReviewer`	Complete review interface combining list, file preview, and data editor
`ExtractionComponent`	Side-by-side file preview and data display with resizable panels
`UploadJobsList`	Upload 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.

Overview

Primitives

Workflows

Core Concepts

Enterprise

What are Retab Widgets?

Key Features

Drop-in Components

Real-time Streaming

Customizable

Installation

Architecture

Available Components

Next Steps

Widgets Reference

Hooks Reference

Next.js Quickstart

​What are Retab Widgets?

​Key Features

Drop-in Components

Real-time Streaming

Customizable

​Installation

​Architecture

​Available Components

​Next Steps

Widgets Reference

Hooks Reference

Next.js Quickstart

What are Retab Widgets?

Key Features

Installation

Architecture

Available Components

Next Steps