Document Paper

"use client"

import {

The DocumentPaper component lays out an official document: an account confirmation letter, a statement, a transfer confirmation, or a fee report. It follows the theme on screen and prints black on white, with table headings that repeat on every printed page. Use it when the screen shows a document people will download, print, or hand to someone else. For key and value pairs inside the app, such as transfer details in a sheet, pick Key Value instead.

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @dots/document-paper
Copy

Usage#

Copyimport {
  DocumentPaper,
  DocumentPaperBody,
  DocumentPaperFooter,
  DocumentPaperHeader,
  DocumentPaperMeta,
  DocumentPaperRow,
  DocumentPaperSignature,
  DocumentPaperTable,
  DocumentPaperTitle,
} from "@/components/ui/document-paper"

Copy<DocumentPaper>
  <DocumentPaperHeader>
    <Logo />
    <DocumentPaperMeta>
      <span>No. 2041-7781</span>
      <span>11 Nov 2026</span>
    </DocumentPaperMeta>
  </DocumentPaperHeader>
  <DocumentPaperTitle>Account confirmation letter</DocumentPaperTitle>
  <DocumentPaperBody>
    <p>We confirm that Alex Morgan holds a current account with us.</p>
  </DocumentPaperBody>
  <DocumentPaperTable>
    <DocumentPaperRow label="Account holder">Alex Morgan</DocumentPaperRow>
  </DocumentPaperTable>
  <DocumentPaperSignature name="Jordan Lee" position="Head of operations" />
  <DocumentPaperFooter>
    <span>Page 1 of 1</span>
  </DocumentPaperFooter>
</DocumentPaper>

Composition#

Use the following composition to build a document. Every part is optional except the paper itself; keep them in this order.

CopyDocumentPaper
├── DocumentPaperHeader
│   └── DocumentPaperMeta
├── DocumentPaperTitle
├── DocumentPaperBody
├── DocumentPaperTable
│   └── DocumentPaperRow
├── DocumentPaperTotals
│   └── DocumentPaperTotal
├── DocumentPaperLines
│   ├── DocumentPaperLinesHeader
│   │   └── DocumentPaperLinesRow
│   │       └── DocumentPaperLinesHead
│   ├── DocumentPaperLinesBody
│   │   └── DocumentPaperLinesRow
│   │       └── DocumentPaperLinesCell
│   │           └── DocumentPaperNote
│   └── DocumentPaperLinesFooter
│       └── DocumentPaperLinesRow variant="total"
├── DocumentPaperSignature
├── DocumentPaperVerify
└── DocumentPaperFooter

Features#

• Follows the theme on screen and prints black on white
• The title names the whole document for assistive tech
• Key and value rows with alternating fills instead of rules, mono digits, and notes
• Summary tiles that sit in one row on wide paper and two by two on narrow paper
• Multi-column lines that stack into two columns on narrow paper and go back to a native table in print
• Group headings and a total row, with column headings repeated on every printed page
• An electronic signature pill and a verification QR code with a typed code

Table#

Use DocumentPaperTable with DocumentPaperRow for details such as the account holder and account number. Set mono on numbers people copy or compare, emphasis on the one figure that matters, and note or valueNote for a second line under the label or value.

"use client"

import {

Totals#

Use DocumentPaperTotals for two to four summary figures, such as the opening and closing balance of a statement. Mark the one figure the document is about with main.

"use client"

import {

Lines#

Use DocumentPaperLines for operations with several columns. Pass a CSS grid template in columns and set align="end" on numeric columns. Below 28rem of paper width, each row stacks into two columns: start cells on the left, end cells on the right. Give the table an aria-label.

"use client"

import {

Groups#

Put one DocumentPaperLinesBody per group so the fills restart under each heading. A group heading is a row with variant="group" and one DocumentPaperLinesHead with scope="rowgroup" and a colSpan. Close the table with a variant="total" row inside DocumentPaperLinesFooter, which prints once after the last line.

"use client"

import {

Signature and verification#

DocumentPaperSignature shows the signer and a pill that says the document is signed electronically. DocumentPaperVerify shows a small QR code that opens value, and a code people can type in instead of scanning.

Copy<DocumentPaperSignature
  name="Jordan Lee"
  position="Head of operations"
  signedAt="11 Nov 2026, 14:32 UTC"
/>
<DocumentPaperVerify
  value="https://example.com/verify/D-2041-7781"
  code="D-2041-7781"
>
  Scan the code or enter it at example.com/verify to check this document.
</DocumentPaperVerify>

Accessibility#

DocumentPaper renders semantic HTML, so the structure is read the same on screen and in print.

• The paper is an <article> named by DocumentPaperTitle while a title is mounted
• DocumentPaperTable and DocumentPaperTotals are description lists (<dl>), so each label is read with its value
• DocumentPaperLines keeps table roles while the rows are restyled, and the column headings stay available to screen readers when they are hidden on narrow paper
• Group headings are row headers for the rows under them

Set the heading level#

DocumentPaperTitle renders an <h2> by default. Set headingLevel to fit the page outline, for example 1 when the document is the whole page.

Copy<DocumentPaperTitle headingLevel={1}>Account statement</DocumentPaperTitle>

Label the lines and the QR code#

Give each DocumentPaperLines an aria-label, such as "Operations". DocumentPaperVerify names its QR code "QR code to verify this document" by default; pass label to change it. Always keep the typed code so people who can't scan can still check the document.

Keep the issuer mark decorative#

The mark in DocumentPaperHeader is usually decorative. Hide it with aria-hidden, or give an <img> an alt with the issuer's name.

API Reference#

DocumentPaper#

The paper. Renders an <article>.

DocumentPaperHeader#

The top row: the issuer mark on the start side, DocumentPaperMeta on the end side. Renders a <header>.

DocumentPaperMeta#

The document number and date, one per line, in mono.

DocumentPaperTitle#

The document's name. It also names the paper.

DocumentPaperBody#

Running text. Paragraphs inside get even spacing.

DocumentPaperTable#

Key and value pairs. Renders a <dl>.

DocumentPaperRow#

One label and value pair.

DocumentPaperNote#

A small muted line under a label, value, or cell.

DocumentPaperTotals#

Summary tiles for two to four figures. Renders a <dl>.

DocumentPaperTotal#

One summary figure.

DocumentPaperLines#

A table of document lines.

DocumentPaperLinesHeader, DocumentPaperLinesBody, DocumentPaperLinesFooter#

The column headings, a group of lines, and the total row. Render <thead>, <tbody>, and <tfoot> and accept all of their props.

DocumentPaperLinesRow#

DocumentPaperLinesHead#

A column heading, or a row heading with scope="row" or scope="rowgroup".

DocumentPaperLinesCell#

DocumentPaperSignature#

DocumentPaperVerify#

DocumentPaperFooter#

Small print at the bottom: issuer details, page number, legal notes. Renders a <footer>.