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 @extend/document-splits
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 |