Document Splits

Organize long PDFs into smaller documents with lazy page thumbnails and drag-and-drop grouping.

Document Splits provide editable split groups for long documents. Pair them with the PDF Viewer block when users need to preview pages while organizing output documents.

See it composed with the PDF Viewer in the Document Splits block.

"use client";

import * as React from "react";

import {
  DocumentSplits,
  type DocumentSplit,
  type DocumentSplitPageId,
} from "@/components/ui/document-splits";

Installation


pnpm dlx shadcn@latest add https://ui.extend.ai/r/document-splits.json

Useful behaviors

Lazy PDF page thumbnails rendered from the source document.
Drag pages between split groups and reorder split groups.
Vertically scrollable split groups with horizontally scrolling page rows.
Pair with the PDF Viewer block when selected pages should scroll the document canvas.

API Reference

DocumentSplits

The DocumentSplits component renders controlled split groups and paints cached page images through FileThumbnail.

Prop	Type	Default	Required
`activePage`	`number`	`-`	Yes
`className`	`string`	`-`	No
`splits`	`DocumentSplit[]`	`-`	Yes
`thumbnailImages`	`Record<DocumentSplitPageId, string>`	`{}`	No
`withFrameDivider`	`boolean`	`true`	No
`onSelectPage`	`(pageNumber: number) => void`	`-`	Yes
`onSplitsChange`	`(splits: DocumentSplit[]) => void`	`-`	Yes

DocumentSplit

Prop	Type	Default	Required
`id`	`string`	`-`	Yes
`title`	`string`	`-`	Yes
`pages`	`DocumentSplitPageId[]`	`-`	Yes

E-Signature

On This Page

Installation Useful behaviors API Reference DocumentSplits DocumentSplit

Deploy your document processing on Extend

Trusted by Brex, Flatiron, Square, and more.

Extend provides production ready tools to handle your toughest documents.