Extend UI Documentation

Extend UI is an open source React component library designed specifically for building document processing interfaces. It provides primitives for previewing, navigating, searching, comparing, and reviewing files (such as PDFs, DOCX, and Excel) within document-heavy workflows.

Key capabilities include:

• File Viewers: Specialized components for common document types.
• Navigation: Primitives for moving through pages, sheets, sections, images, and extracted text.
• Review Surfaces: Components for annotations, e-signatures, and human-in-the-loop validation.
• Utility Panels: Layout blocks for managing extraction status and validation context.

Extend UI is a documentation and registry application for open-source document components developed by Extend. It provides a collection of React 19 and Tailwind v4 compatible components designed for document-centric workflows.

Key capabilities include:

• Document Viewing & Management: PDF viewing, document uploads, and thumbnails.
• Document Intelligence: Citations, bounding box citations, and layout blocks.
• Workflow Automation: Document splitting and e-signature workflows.

The Excel viewer is designed for previewing XLSX workbooks, financial models, and operational reports. Key capabilities include:

• Grid Navigation: Sheet tabs, grid virtualization, column resizing, and frozen rows or columns.
• Data Display: Support for both formula and value display modes, along with formatted cell rendering.
• Search: Ability to search across different sheets and specific cell ranges.
• Metadata: Support for workbook properties, hidden sheets, and named ranges.

The FileUpload component provides a drag-and-drop interface for document processing workflows. It supports file type validation (size, page count, duplicates), upload progress tracking, and batch upload summaries for various formats like PDF, DOCX, XLSX, CSV, and images.

Key features include:

• Drag-and-drop and file picker entrypoints.
• Upload progress, cancel, retry, and queued states.
• Hooks for parsing, extraction, review, or routing once files are accepted.

Extend UI is composed of document-specific components built on top of base UI primitives.

• Document Components: Maintained directly within Extend UI (e.g., viewers, navigation primitives).
• Base Primitives: Extend UI uses Coss UI for shared patterns like buttons, tooltips, selects, popovers, dialogs, and menus.
• Icons: Provided by Hugeicons.

To explore the library, use the /docs/components index for a full list of individual components or /blocks for composed layout examples.

The FileThumbnail component provides a consistent preview shell for document lists, upload queues, and attachment trays. It does not parse documents itself; instead, it manages the UI lifecycle (shimmering loading state, fade-in transitions, and fallback states) for previews generated by your own rendering pipeline.

To use it, pass an image URL via previewImageUrl or custom React content via previewContent from your PDF, DOCX, XLSX, or image processing stack.

Layout Blocks provide a way to debug and review the text layer behind PDFs without replacing the original page image. Key features include:

• Overlays: Toggleable overlays for blocks, lines, and words.
• Confidence Coloring: Visual indicators for low-quality layout regions based on confidence scores.
• Interactivity: Hover and selection states that reveal the underlying text and geometry.
• Navigation: Ability to navigate from layout results directly to the corresponding region on the rendered PDF page.

The DocumentSplits component is used to organize long documents (like PDFs) into editable split groups. It supports lazy page thumbnail rendering and drag-and-drop functionality for reordering pages and groups.

Key Features:

• Drag pages between split groups.
• Reorder split groups.
• Vertically scrollable groups with horizontally scrolling page rows.
• Works best when paired with a PDF Viewer block to allow selected pages to scroll the document canvas.

The PDFViewer component integrates with the standard components/ui/scroll-area component. By default, it looks for an element with the attribute data-slot="scroll-area-viewport" to use as the scrolling viewport for EmbedPDF.

If your ScrollArea implementation uses different markup, you must provide the resolveScrollAreaViewport prop. This function receives the container (the HTMLDivElement of the ScrollArea) and should return the actual element that handles scrolling.

You can install the React DOCX Editor using the shadcn CLI or by manually installing the required dependencies and components.

Using shadcn CLI (Recommended)

npx shadcn@latest add @extend/docx-editor

Manual Installation

1. Install the core dependencies:

npm install @base-ui/react@^1.4.1 @extend-ai/react-docx@^0.8.1 @hugeicons/core-free-icons@^4.2.0 @hugeicons/react@^1.1.6

2. Install the required File Thumbnail and Toggle components:

npx shadcn@latest add @extend/file-thumbnail @extend/toggle

3. Copy the component source into your project and update the import paths to match your project structure.

Because Glide Data Grid relies on browser-only APIs, you may encounter Server-Side Rendering (SSR) errors in Next.js. To resolve this, load the CsvViewer component dynamically with ssr: false using next/dynamic.

"use client"

import dynamic from "next/dynamic"

const CsvViewer = dynamic(
  () => import("@/components/extend/csv-viewer").then((mod) => mod.CsvViewer),
  { ssr: false }
)