react-xel

Introduction

Advanced Excel export utilities for React and Next.js.

What is react-xel?

react-xel exports Excel-compatible files from React/Next.js apps.

You can use:

  • The core API from react-xel (server-safe buffer mode included)
  • The UI components from react-xel/ui (client-only download UI)

Quick start

pnpm add react-xel

Client download (UI)

Must be used inside a Client Component ("use client").

"use client";

import { ExcelExportButton } from "react-xel/ui";

export default function Page() {
  return (
    <ExcelExportButton
      label="Export users.xlsx"
      fileName="users.xlsx"
      sheetName="Users"
      rows={[{ id: 1, name: "Ada" }]}
    />
  );
}

Styles

Import once (for the built-in UI look):

import "react-xel/styles.css";

Advanced guides

On this page