Components
Loading preview...
A spreadsheet viewer that renders XLSX workbooks with multiple sheets, frozen headers, formulas, toolbar, zoom, upload and download. Powered by @extend-ai/react-xlsx.
npx shadcn@latest add https://21st.dev/r/extend-hq/xlsx-viewer"use client";
import ExcelViewer from "@/components/ui/xlsx-viewer";
const SAMPLE_XLSX =
"data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,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";
export default function Default() {
return (
<div className="mx-auto w-full max-w-4xl p-6">
<ExcelViewer src={SAMPLE_XLSX} fileName="workbook-sample.xlsx" className="h-[640px]" />
</div>
);
}