### Install dependencies for manual setup

Source: https://www.extend.ai/ui/docs/components/document-splits

Install the required @dnd-kit packages for drag-and-drop functionality when setting up manually.

```bash
npm install @dnd-kit/core@^6.3.1 @dnd-kit/sortable@^10.0.0 @dnd-kit/utilities@^3.2.2
```

--------------------------------

### Install dependencies for manual setup

Source: https://www.extend.ai/ui/docs/components/layout-blocks

Install the required dependencies for the Layout Blocks component when setting up manually.

```bash
npm install @tanstack/react-virtual@^3.13.26 react-markdown@^10.1.0 rehype-raw@^7.0.0 rehype-sanitize@^6.0.0 remark-gfm@^4.0.1
```

--------------------------------

### Install dependencies manually

Source: https://www.extend.ai/ui/docs/components/pdf-viewer

Install the required EmbedPDF packages and pdf-lib for manual setup.

```bash
npm install @embedpdf/core@^2.15.0 @embedpdf/engines@^2.15.0 @embedpdf/models@^2.15.0 @embedpdf/plugin-document-manager@^2.15.0 @embedpdf/plugin-interaction-manager@^2.15.0 @embedpdf/plugin-render@^2.15.0 @embedpdf/plugin-rotate@^2.15.0 @embedpdf/plugin-scroll@^2.15.0 @embedpdf/plugin-search@^2.15.0 @embedpdf/plugin-selection@^2.15.0 @embedpdf/plugin-thumbnail@^2.15.0 @embedpdf/plugin-tiling@^2.15.0 @embedpdf/plugin-viewport@^2.15.0 @embedpdf/plugin-zoom@^2.15.0 pdf-lib@^1.17.1
```

--------------------------------

### Install dependencies for manual setup

Source: https://www.extend.ai/ui/docs/components/bounding-box-citations

Install the required dependencies for manual installation. The component source references icons through IconPlaceholder, which supports lucide, tabler, hugeicons, phosphor, and remixicon.

```bash
npm install @glideapps/glide-data-grid@6.0.4-alpha24 @pierre/diffs@^1.1.22
```

--------------------------------

### Manual installation: Install dependencies

Source: https://www.extend.ai/ui/docs/components/pptx-viewer

Install the required dependencies for manual installation. This includes the @extend-ai/react-pptx package and @tanstack/react-virtual.

```bash
npm install @extend-ai/react-pptx@0.2.1 @tanstack/react-virtual@^3.13.12
```

--------------------------------

### Install via CLI: npx shadcn@latest add @extend/pptx-viewer

Source: https://www.extend.ai/ui/docs/components/pptx-viewer

Use this command to install the component via the shadcn CLI. This is the recommended installation method.

```bash
npx shadcn@latest add @extend/pptx-viewer
```

--------------------------------

### Manual installation steps

Source: https://www.extend.ai/ui/docs/components/xlsx-editor

Manual installation steps: first install the required dependencies, then add the Excel Viewer, Group, Color Picker, and Toggle components that the editor reuses. After these steps, copy the component source and update import paths.

```bash
npm install @base-ui/react@^1.4.1 @extend-ai/react-xlsx@0.16.4 class-variance-authority@^0.7.1
```

```bash
npx shadcn@latest add @extend/xlsx-viewer @extend/group @extend/color-picker @extend/toggle
```

--------------------------------

### Install additional components

Source: https://www.extend.ai/ui/docs/components/docx-editor

Install the File Thumbnail and Toggle components required by the editor.

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

--------------------------------

### Install dependencies for manual setup

Source: https://www.extend.ai/ui/docs/components/csv-tsv-viewer

Install the required dependencies for manual installation: Glide Data Grid version 6.0.4-alpha24 and PapaParse version ^5.5.3.

```bash
npm install @glideapps/glide-data-grid@6.0.4-alpha24 papaparse@^5.5.3
```

--------------------------------

### Install EmbedPDF dependencies for manual setup

Source: https://www.extend.ai/ui/docs/components/pdf-editor

Install all required EmbedPDF plugins and pdf-lib for manual installation. The editor registers annotation, redaction, form, signature, stamp, history, bookmark, attachment, capture, print, export, fullscreen, pan, spread, rotate, search, selection, thumbnail, and zoom plugins.

```bash
npm install @embedpdf/core@^2.15.0 @embedpdf/engines@^2.15.0 @embedpdf/models@^2.15.0 @embedpdf/plugin-annotation@^2.15.0 @embedpdf/plugin-attachment@^2.15.0 @embedpdf/plugin-bookmark@^2.15.0 @embedpdf/plugin-capture@^2.15.0 @embedpdf/plugin-document-manager@^2.15.0 @embedpdf/plugin-export@^2.15.0 @embedpdf/plugin-form@^2.15.0 @embedpdf/plugin-fullscreen@^2.15.0 @embedpdf/plugin-history@^2.15.0 @embedpdf/plugin-interaction-manager@^2.15.0 @embedpdf/plugin-pan@^2.15.0 @embedpdf/plugin-print@^2.15.0 @embedpdf/plugin-redaction@^2.15.0 @embedpdf/plugin-render@^2.15.0 @embedpdf/plugin-rotate@^2.15.0 @embedpdf/plugin-scroll@^2.15.0 @embedpdf/plugin-search@^2.15.0 @embedpdf/plugin-selection@^2.15.0 @embedpdf/plugin-signature@^2.15.0 @embedpdf/plugin-spread@^2.15.0 @embedpdf/plugin-stamp@^2.15.0 @embedpdf/plugin-thumbnail@^2.15.0 @embedpdf/plugin-tiling@^2.15.0 @embedpdf/plugin-viewport@^2.15.0 @embedpdf/plugin-zoom@^2.15.0 pdf-lib@^1.17.1
```

--------------------------------

### Install via CLI

Source: https://www.extend.ai/ui/docs/components/docx-editor

Install the DOCX editor component using the shadcn CLI command.

```bash
npx shadcn@latest add @extend/docx-editor
```

--------------------------------

### Install dependencies manually

Source: https://www.extend.ai/ui/docs/components/docx-editor

Install the required dependencies for the DOCX editor when setting up manually.

```bash
npm install @base-ui/react@^1.4.1 @extend-ai/react-docx@^0.9.2
```

--------------------------------

### Install @extend-ai/react-docx dependency

Source: https://www.extend.ai/ui/docs/components/docx-viewer

Manual installation step: install the core DOCX viewer library. This is required when copying the component source manually.

```bash
npm install @extend-ai/react-docx@^0.9.2
```

--------------------------------

### Install File Thumbnail component

Source: https://www.extend.ai/ui/docs/components/file-upload

Install the @extend/file-thumbnail component because File Upload uses it for selected file rows.

```bash
npx shadcn@latest add @extend/file-thumbnail
```

--------------------------------

### Install with shadcn CLI

Source: https://www.extend.ai/ui/docs/components/xlsx-editor

Use the shadcn CLI to add the xlsx-editor component to your project. This is the recommended installation method.

```bash
npx shadcn@latest add @extend/xlsx-editor
```

--------------------------------

### Install @pierre/trees dependency

Source: https://www.extend.ai/ui/docs/components/file-system

Install the required dependency for the file-system component when setting it up manually. This is part of the manual installation steps.

```bash
npm install @pierre/trees
```

--------------------------------

### Install with shadcn CLI

Source: https://www.extend.ai/ui/docs/components/pdf-viewer

Use the shadcn CLI to add the @extend/pdf-viewer component to your project.

```bash
npx shadcn@latest add @extend/pdf-viewer
```

--------------------------------

### Install DOCX Viewer via shadcn CLI

Source: https://www.extend.ai/ui/docs/components/docx-viewer

Use this command to add the @extend/docx-viewer component to your project. This is the recommended installation method.

```bash
npx shadcn@latest add @extend/docx-viewer
```

--------------------------------

### Install @extend/pdf-editor with shadcn CLI

Source: https://www.extend.ai/ui/docs

Install the PDF editor component. The CLI installs missing dependencies and respects your component aliases. Keep existing primitives when prompted; no overwrite flag is required.

```bash
npx shadcn@latest add @extend/pdf-editor
```

--------------------------------

### Install Schema Builder Dependencies

Source: https://www.extend.ai/ui/docs/components/schema-builder

Manually install the required dependencies for the Schema Builder component. This is part of the manual installation steps.

```bash
npm install @dnd-kit/core@^6.3.1 @dnd-kit/sortable@^10.0.0 @dnd-kit/utilities@^3.2.2 @pierre/diffs@^1.2.7 next-themes@0.4.6
```

--------------------------------

### Install Document Viewer Sidebar with shadcn CLI

Source: https://www.extend.ai/ui/docs/components/document-viewer-sidebar

Install the Document Viewer Sidebar component using the shadcn CLI.

```bash
npx shadcn@latest add @extend/document-viewer-sidebar
```

--------------------------------

### Install via shadcn CLI

Source: https://www.extend.ai/ui/docs/components/bounding-box-citations

Install the component via the shadcn CLI. This command adds the component and replaces icon placeholders with icons from your configured icon library.

```bash
npx shadcn@latest add @extend/bounding-box-citations
```

--------------------------------

### Install @extend-ai/react-xlsx dependency

Source: https://www.extend.ai/ui/docs/components/xlsx-viewer

Manually install the required dependency for the React Excel Viewer component. This is the first step of the manual installation process.

```bash
npm install @extend-ai/react-xlsx@0.16.4
```

--------------------------------

### Install border-beam dependency

Source: https://www.extend.ai/ui/docs/components/file-upload

Install the border-beam package required by the File Upload component.

```bash
npm install border-beam@^1.0.1
```

--------------------------------

### Install File Upload via CLI

Source: https://www.extend.ai/ui/docs/components/file-upload

Use the shadcn CLI to add the @extend/file-upload component to your project.

```bash
npx shadcn@latest add @extend/file-upload
```

--------------------------------

### Install Resizable package dependency

Source: https://www.extend.ai/ui/docs/components/pdf-editor

Install the Resizable package dependency required by the editor's resizable panels.

```bash
npm install react-resizable-panels@^4.11.2
```

--------------------------------

### Install file-system component with shadcn CLI

Source: https://www.extend.ai/ui/docs/components/file-system

Use this command to install the file-system component via the shadcn CLI. It automatically replaces icon placeholders with icons from your configured icon library.

```bash
npx shadcn@latest add @extend/file-system
```

--------------------------------

### Install E-Signature Dependencies Manually

Source: https://www.extend.ai/ui/docs/components/e-signature

Manually installs the required dependencies for the E-Signature component: pdf-lib for PDF manipulation and signature_pad for capturing signatures.

```bash
npm install pdf-lib@^1.17.1 signature_pad@^5.1.3
```

--------------------------------

### Install with shadcn CLI

Source: https://www.extend.ai/ui/docs/components/xlsx-viewer

Use the shadcn CLI to install the React Excel Viewer component. Requires a style-aware registry configured in components.json with a URL that includes {style}.

```bash
npx shadcn@latest add @extend/xlsx-viewer
```

--------------------------------

### Install Document Splits via CLI

Source: https://www.extend.ai/ui/docs/components/document-splits

Run this command to add the @extend/document-splits component using the shadcn CLI.

```bash
npx shadcn@latest add @extend/document-splits
```

--------------------------------

### Install Layout Blocks via CLI

Source: https://www.extend.ai/ui/docs/components/layout-blocks

Use the shadcn CLI to add the @extend/layout-blocks component to your project.

```bash
npx shadcn@latest add @extend/layout-blocks
```

--------------------------------

### Install E-Signature via CLI

Source: https://www.extend.ai/ui/docs/components/e-signature

Installs the E-Signature component using the shadcn CLI. This command adds the component and its dependencies to your project.

```bash
npx shadcn@latest add @extend/e-signature
```

--------------------------------

### Install Schema Builder via CLI

Source: https://www.extend.ai/ui/docs/components/schema-builder

Use the shadcn CLI to add the Schema Builder component to your project. This command installs the component and its dependencies automatically.

```bash
npx shadcn@latest add @extend/schema-builder
```

--------------------------------

### Install CSV Viewer via shadcn CLI

Source: https://www.extend.ai/ui/docs/components/csv-tsv-viewer

Install the CSV Viewer component using the shadcn CLI. This command adds the component and replaces icon placeholders with icons from your configured icon library.

```bash
npx shadcn@latest add @extend/csv-viewer
```

--------------------------------

### Configure @extend registry in components.json

Source: https://www.extend.ai/ui/docs

Configure the style-aware registry in components.json. Replace any existing @extend URL ending in /r/{name}.json with this URL, which serves components matching your project's style (Base UI or Radix).

```json
{
  "registries": {
    "@extend": "https://www.extend.ai/ui/r/styles/{style}/{name}.json"
  }
}
```

--------------------------------

### Imperative Handle Methods

Source: https://www.extend.ai/ui/docs/components/pdf-editor

Documentation for the imperative handle methods exposed by the PDFEditor component via a ref.

```APIDOC
## Imperative Handle Methods

### Description
Methods available on the imperative handle returned by the `ref` passed to the PDFEditor component. These allow programmatic control of the editor.

### Methods

#### getDocumentBuffer()
Resolves the current PDF bytes including annotations, form values, and pending security changes.

#### download(fileName?)
Saves the document through the browser. Optional `fileName` parameter.

#### print(options?)
Opens the print dialog. Optional `options` object with `pageRange` and `includeAnnotations`.

#### exportAnnotations()
Resolves every annotation as `AnnotationTransferItem[]` (stamps include their image data).

#### importAnnotations(items)
Adds previously exported annotations to the document. Takes an array of `AnnotationTransferItem`.

#### getFormValues()
Returns a `Record<string, string>` of field names and values.

#### setFormValues(values)
Fills form fields by name. Takes a `Record<string, string>`.

#### applyRedactions()
Permanently applies every pending redaction mark.

#### setMode(mode)
Switches the editing mode. Takes a mode string.

#### setActiveTool(toolId | null)
Activates an EmbedPDF tool id such as `highlight`, `ink`, or `formTextField`. Pass `null` to deactivate.

#### scrollToPage(pageNumber)
Scrolls to a page. Takes a page number.

#### undo() / redo()
Steps through the history stack.

#### getViewportElement()
Returns the scrolling viewport element.
```

--------------------------------

### useElementWidth

Source: https://www.extend.ai/ui/docs/components/document-viewer-sidebar

The useElementWidth hook returns a ref and measured width for responsive viewer layout decisions.

```APIDOC
## useElementWidth

### Description
The useElementWidth hook returns a ref and measured width for responsive viewer layout decisions.

### Returns
- **ref** - A ref to attach to the element to measure.
- **width** - The measured width of the element.
```

--------------------------------

### Define FileSystemItem manifest

Source: https://www.extend.ai/ui/docs/components/file-system

Defines a flat manifest of FileSystemItem objects for the component. Folder entries are optional; missing prefixes are inferred from file paths. Explicit folder entries are needed for paginated or lazy traversal where S3 CommonPrefixes describe folders whose contents have not been listed yet.

```ts
const items: FileSystemItem[] = [
  {
    kind: "folder",
    path: "invoices/2026/",
    hasChildren: true,
  },
  {
    kind: "file",
    key: "invoices/2026/jan.pdf",
    path: "invoices/2026/jan.pdf",
    contentType: "application/pdf",
    size: 482193,
    createdAt: "2026-01-04T10:02:00.000Z",
    updatedAt: "2026-06-09T18:21:00.000Z",
    etag: '"abc123"',
    previewImageUrl: "/thumbnails/invoices/2026/jan.png",
  },
]
```

--------------------------------

### Lazy loading with loadChildren and getFileUrl

Source: https://www.extend.ai/ui/docs/components/file-system

Pass hasChildren: true on folder entries and provide loadChildren to fetch a folder's contents the first time it is opened, following nextCursor until exhausted. getFileUrl signs or resolves file URLs for the viewer.

```tsx
<FileSystem
  items={rootItems}
  loadChildren={async ({ path, cursor }) =>
    fetch(`/api/files/list?prefix=${path}&cursor=${cursor ?? ""}`).then((r) =>
      r.json()
    )
  }
  getFileUrl={async (file) =>
    `/api/files/sign?key=${encodeURIComponent(file.key ?? file.path)}`
  }
/>
```

--------------------------------

### PDFViewer Component

Source: https://www.extend.ai/ui/docs/components/pdf-viewer

Documentation for the PDFViewer React component, including its props and usage notes.

```APIDOC
## PDFViewer Component

### Description
Renders a scrollable PDF surface with toolbar controls, lazy page rendering, uploads, and page-level extension hooks.

### Props

| Prop | Type | Default | Required |
| --- | --- | --- | --- |
| `src` | `string` | `-` | No |
| `className` | `string` | `-` | No |
| `defaultZoom` | `number \| "fit-page" \| "fit-width" \| "automatic"` | `1` | No |
| `resolveScrollAreaViewport` | `(container: HTMLDivElement) => HTMLDivElement \| null` | Finds `[data-slot="scroll-area-viewport"]` | No |
| `showDownload` | `boolean` | `true` | No |
| `showToolbar` | `boolean` | `true` | No |
| `showRotateControls` | `boolean` | `true` | No |
| `showUpload` | `boolean` | `true` | No |
| `toolbarActions` | `React.ReactNode` | `-` | No |
| `pageClassName` | `(pageNumber: number) => string \| undefined` | `-` | No |
| `renderPageOverlay` | `(props: PDFViewerPageOverlayProps) => React.ReactNode` | `-` | No |
| `onActivePageChange` | `(pageNumber: number) => void` | `-` | No |
| `onDocumentLoadSuccess` | `(numPages: number) => void` | `-` | No |
| `onPdfUpload` | `(file: File) => void` | `-` | No |
| `onPagePointerDown` | `(event: React.PointerEvent<HTMLDivElement>, pageNumber: number) => void` | `-` | No |
| `onPagePointerMove` | `(event: React.PointerEvent<HTMLDivElement>, pageNumber: number) => void` | `-` | No |
| `onPagePointerUp` | `(event: React.PointerEvent<HTMLDivElement>, pageNumber: number) => void` | `-` | No |
| `onPagePointerCancel` | `(event: React.PointerEvent<HTMLDivElement>, pageNumber: number) => void` | `-` | No |

### Usage Notes
- Works with the standard `components/ui/scroll-area` component.
- Looks for the conventional `data-slot="scroll-area-viewport"` element and gives that element to EmbedPDF.
- If your ScrollArea uses different markup, pass `resolveScrollAreaViewport` to return its actual scrolling viewport from the provided container.
```

--------------------------------

### FileUpload

Source: https://www.extend.ai/ui/docs/components/file-upload

The FileUpload component renders a drag-and-drop file picker, validates accepted files, and keeps an internal upload queue unless you mirror it through callbacks.

```APIDOC
## FileUpload

### Description
The FileUpload component renders a drag-and-drop file picker, validates accepted files, and keeps an internal upload queue unless you mirror it through callbacks.

### Props

| Prop | Type | Default | Required |
| --- | --- | --- | --- |
| `accept` | `string` | PDF, DOC/DOCX, XLSX, CSV, PNG, or JPG | No |
| `acceptedFileTypes` | `AcceptedFileType[]` | Image, PDF, and Sheet icons | No |
| `borderBeamTheme` | `React.ComponentProps<typeof BorderBeam>["theme"]` | `"light"` | No |
| `browseLabel` | `string` | `"Browse files"` | No |
| `className` | `string` | `-` | No |
| `description` | `string` | `"PDF, DOC/DOCX, XLSX, CSV, PNG, or JPG"` | No |
| `draggingLabel` | `string` | `"Drop to add"` | No |
| `multiple` | `boolean` | `true` | No |
| `showBorderBeam` | `boolean` | `true` | No |
| `showFileList` | `boolean` | `true` | No |
| `title` | `string` | `"Click to upload or drop files"` | No |
| `onFilesAccepted` | `(files: File[]) => void` | `-` | No |
| `onFilesChange` | `(files: FileUploadItem[]) => void` | `-` | No |
```

--------------------------------

### DocumentViewerSidebarSkeleton

Source: https://www.extend.ai/ui/docs/components/document-viewer-sidebar

The DocumentViewerSidebarSkeleton component renders the sidebar loading state used while document thumbnails are not ready.

```APIDOC
## DocumentViewerSidebarSkeleton

### Description
The DocumentViewerSidebarSkeleton component renders the sidebar loading state used while document thumbnails are not ready.

### Props
- **inline** (boolean) - Required - Whether the skeleton should render inline or as an overlay.
```

--------------------------------

### CsvViewer

Source: https://www.extend.ai/ui/docs/components/csv-tsv-viewer

API documentation for the CsvViewer component, including its props and usage.

```APIDOC
## CsvViewer

### Description
The CsvViewer component renders a built-in CSV/TSV upload flow, parser state, zoom controls, and a virtualized grid. It supports optional toolbar search via the `search` prop.

### Props

| Prop | Type | Default | Required |
| --- | --- | --- | --- |
| `className` | `string` | `-` | No |
| `data` | `string` | `-` | No |
| `search` | `boolean` | `false` | No |

### Usage Example
```tsx
import { CsvViewer } from "@/components/extend/csv-viewer"

<CsvViewer data="col1,col2\nval1,val2" search />
```
```

--------------------------------

### PDFEditor

Source: https://www.extend.ai/ui/docs/components/pdf-editor

Documentation for the PDFEditor React component, including its props and event callbacks.

```APIDOC
## PDFEditor Component

### Description
A React component for embedding a PDF editor with support for viewing, annotating, signing, forms, and redaction. It provides a rich set of props for customization and event callbacks.

### Props

| Prop | Type | Default | Required |
|------|------|---------|----------|
| `src` | `string \| ArrayBuffer \| Uint8Array \| Blob` | `-` | No |
| `fileName` | `string` | Derived from `src` | No |
| `className` | `string` | `-` | No |
| `defaultZoom` | `number \| "fit-page" \| "fit-width" \| "automatic"` | `"fit-width"` | No |
| `defaultMode` | `"view" \| "annotate" \| "sign" \| "forms" \| "redact"` | `"view"` | No |
| `annotationAuthor` | `string` | `"Guest"` | No |
| `colorPresets` | `string[]` | Eleven hex colors | No |
| `features` | `PdfEditorFeatureFlags` | Everything enabled | No |
| `showToolbar` | `boolean` | `true` | No |
| `showUpload` | `boolean` | `true` | No |
| `showDownload` | `boolean` | `true` | No |
| `toolbarActions` | `React.ReactNode` | `-` | No |
| `selectionActions` | `PdfEditorSelectionAction[]` | `[]` | No |
| `persistSignatures` | `boolean \| string` | `true` (localStorage) | No |
| `stampManifests` | `string[]` | EmbedPDF default stamps | No |
| `signatureFontsStylesheetUrl` | `string \| null` | Google Fonts handwriting styles | No |
| `resolveScrollAreaViewport` | `(container: HTMLDivElement) => HTMLDivElement \| null` | Finds `[data-slot="scroll-area-viewport"]` | No |
| `renderPageOverlay` | `(props: PDFEditorPageOverlayProps) => React.ReactNode` | `-` | No |
| `onDocumentLoadSuccess` | `(info: { numPages: number; documentId: string; fileName: string }) => void` | `-` | No |
| `onDocumentLoadError` | `(message: string) => void` | `-` | No |
| `onActivePageChange` | `(pageNumber: number) => void` | `-` | No |
| `onModeChange` | `(mode: PdfEditorMode) => void` | `-` | No |
| `onAnnotationEvent` | `(event: AnnotationEvent) => void` | `-` | No |
| `onAnnotationsChange` | `(items: AnnotationTransferItem[]) => void` | `-` | No |
| `onFormValuesChange` | `(values: Record<string, string>) => void` | `-` | No |
| `onRedactionsApplied` | `() => void` | `-` | No |
| `onSave` | `(result: { buffer: ArrayBuffer; fileName: string }) => void` | `-` | No |

### Usage Example
```jsx
import { PDFEditor } from 'embedpdf';

<PDFEditor
  src={pdfUrl}
  defaultMode="annotate"
  onDocumentLoadSuccess={({ numPages }) => console.log(`Loaded ${numPages} pages`)}
  onSave={({ buffer, fileName }) => console.log('Saved', fileName)}
/>
```
```

--------------------------------

### useInlineThumbnailSidebar

Source: https://www.extend.ai/ui/docs/components/document-viewer-sidebar

The useInlineThumbnailSidebar hook returns whether the sidebar should render inline for a measured viewer width.

```APIDOC
## useInlineThumbnailSidebar

### Description
The useInlineThumbnailSidebar hook returns whether the sidebar should render inline for a measured viewer width.

### Returns
- **inline** (boolean) - Whether the sidebar should render inline.
```