> ## Documentation Index
> Fetch the complete documentation index at: https://docs.retab.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<CardGroup cols={3}>
  <Card title="Drop-in Components" icon="puzzle-piece">
    Pre-built UI components that work out of the box with minimal configuration.
  </Card>

  <Card title="Real-time Streaming" icon="bolt">
    Watch extractions populate in real-time as the AI processes your documents.
  </Card>

  <Card title="Customizable" icon="sliders">
    Control visibility, behavior, and styling to match your application's needs.
  </Card>
</CardGroup>

## Installation

Install the package using your preferred package manager:

<CodeGroup>
  ```bash npm theme={null}
  npm install @retab/react
  ```

  ```bash pnpm theme={null}
  pnpm add @retab/react
  ```

  ```bash yarn theme={null}
  yarn add @retab/react
  ```

  ```bash bun theme={null}
  bun add @retab/react
  ```
</CodeGroup>

Import the required styles in your application's root layout or entry point:

```tsx layout.tsx theme={null}
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`:

```tsx providers.tsx theme={null}
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

<CardGroup cols={2}>
  <Card title="Widgets Reference" icon="book" href="/widgets/widgets">
    Detailed documentation for each component with props and examples.
  </Card>

  <Card title="Hooks Reference" icon="code" href="/widgets/hooks">
    React hooks for accessing Retab context and data.
  </Card>

  <Card title="Next.js Quickstart" icon="rocket" href="/widgets/nextjs_quickstart">
    Step-by-step guide to integrate widgets in a Next.js application.
  </Card>
</CardGroup>