Page Footer · @ui-registries/pdf

Footer fixed at the bottom of every page, with page numbers.

page-footer-example.tsx

import { Document, Page, Text } from "@ui-registries/pdf";import { PageFooter } from "@/components/pdf/page-footer";
export default function PageFooterExample() {  return (    <Document>      <Page        className="gap-6 bg-background p-10 text-sm"        size={{ width: 420, height: 420 }}      >        <Text>The footer is repeated at the bottom of every page.</Text>        <PageFooter>Acme Studio · Annual report</PageFooter>      </Page>    </Document>  );}

Installation

Terminal

npx shadcn add https://ui-registry.com/r/pdf/page-footer.json

Usage

tsx

import { PageFooter } from "@/components/pdf/page-footer";
<Page className="px-12 pt-12 pb-24">  {/* content */}  <PageFooter className="right-12 left-12 bottom-8">    Acme Studio · Annual report  </PageFooter></Page>

The footer is absolutely positioned: match left, right and bottom to your page padding, and keep enough bottom padding on the page so content does not run under it.

Customize the page number with pageNumber, or hide it with pageNumber={false}:

tsx

<PageFooter pageNumber={({ pageNumber, totalPages }) => `Page ${pageNumber} of ${totalPages}`} />