# Excel Editor

> A full Excel editor block with workbook upload, cell formatting, merge tools, sheets, zoom, and export controls.

A shadcn/ui block from the [@extend](https://ui.extend.ai/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/extend/excel-editor).

- Page, with a live preview: https://shadcn.exchange/r/extend/excel-editor
- Screenshot: https://shadcn.exchange/shot/extend/excel-editor/light.png
- Registry item: https://ui.extend.ai/r/excel-editor.json
- Categories: documents, blocks
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/extend/excel-editor.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@extend/xlsx-editor`

## Files

### `registry/new-york-v4/blocks/excel-editor.tsx`

```tsx
"use client"

import * as React from "react"

import { XlsxEditorPreview } from "@/components/extend/xlsx-editor"

export function ExcelEditorBlock({
  file,
  heightClassName = "h-[720px]",
}: {
  file?: string
  heightClassName?: string
}) {
  const [isDark, setIsDark] = React.useState(false)
  return (
    <div className={`${heightClassName} min-h-0 overflow-hidden bg-background`}>
      <XlsxEditorPreview
        className="h-full min-h-0 [&>div]:!h-full"
        src={file ?? "/samples/crazy-chart-zoo.xlsx"}
        isDark={isDark}
        onIsDarkChange={setIsDark}
      />
    </div>
  )
}
```