DocumentSheet
document-sheetFrames business documents on an A4-style sheet with header, section, footer, and print controls.
Usage
Basic document
A centered piece of A4 paper with a print button on the top (the entire toolbar is hidden when printing).
To
<DocumentSheet size="a4">
<DocumentSheetHeader>
<div className="text-lg font-bold">Hulian Design Studio</div>
<div className="text-xl font-bold">Quotation</div>
</DocumentSheetHeader>
<DocumentSheetSection title="To">
<div className="font-medium">XX Technology Co., Ltd.</div>
</DocumentSheetSection>
</DocumentSheet>Paragraph and footer signature
DocumentSheetSection is segmented, DocumentSheetFooter contains separators, and DocumentSheetSignature gives a stable signature bit alignment.
Service Description
Includes official website design, component library customization and front-end implementation.<DocumentSheet size="a4" printable={false}>
<DocumentSheetSection title="Service Description">
Includes official website design, component library customization and front-end implementation.
</DocumentSheetSection>
<DocumentSheetFooter>
<div className="flex items-end justify-between gap-8">
<p className="text-xs">Note: The quotation is valid for 30 days. </p>
<DocumentSheetSignature label="Authorized Representative (Signature)" />
</div>
</DocumentSheetFooter>
</DocumentSheet>Custom printing callback
Pass onPrint to take over the printing action (such as verifying first and then window.print). By default, the built-in button directly calls window.print().
Invoice header
XX Technology Co., Ltd.<DocumentSheet
size="a4"
onPrint={() => {
// Customize logic before printing
window.print();
}}
>
<DocumentSheetSection title="Invoice header">
XX Technology Co., Ltd.
</DocumentSheetSection>
</DocumentSheet>When to use
Use DocumentSheet for a printable quotation, invoice, contract, or statement. It presents an A4 sheet on screen and removes toolbar, shadow, and outer spacing in print. Use [Table]/[ProTable] for standalone data; DocumentSheet is the formal paper container around document sections.
Import
import { DocumentSheet, DocumentSheetHeader, DocumentSheetSection, DocumentSheetFooter, DocumentSheetSignature } from "@hulianui/ui"Props
DocumentSheet inherits HTMLAttributes<HTMLDivElement>:
| Name | Type | Default | Description |
|---|---|---|---|
| size | "a4" | "auto" | "a4" | Fixed 210 mm sheet or responsive container width. |
| printable | boolean | true | Shows the built-in print action. |
| className | string | — | Sheet class name. |
Events
| Event | Type | Description |
|---|---|---|
| onPrint | () => void | Print action; omission calls window.print(). |
Slots
| Slot | Type | Description |
|---|---|---|
| toolbar | ReactNode | Content above the sheet, hidden when printing. |
| children* | ReactNode | Sheet content, usually composed from the provided subcomponents. |
DocumentSheetSection accepts title?: ReactNode and children. DocumentSheetSignature accepts label?: ReactNode and lineWidth?: number | string, defaulting to "11rem". Header and Footer are layout containers forwarding div props.
Example
<DocumentSheet size="a4" className="text-sm">
<DocumentSheetHeader>
<div className="text-lg font-bold">Hulian Design Studio</div>
<div className="text-right text-xl font-bold">QUOTATION</div>
</DocumentSheetHeader>
<DocumentSheetSection title="Service details">
<table className="w-full">{/* detail rows */}</table>
</DocumentSheetSection>
<DocumentSheetFooter>
<div className="flex items-end justify-between gap-8">
<p className="text-xs">Note: This quotation is valid for 30 days.</p>
<DocumentSheetSignature label="Authorized representative" />
</div>
</DocumentSheetFooter>
</DocumentSheet>Usage notes
- Print isolation uses
print:hiddenanddata-document-sheet. Addprint:hiddento custom floating controls that should not appear on paper. - Dark mode uses near-black paper. Use foreground and muted tokens instead of hard-coded dark text.
- The built-in action text is Chinese
"\u6253\u5370", meaning “Print.”
Related
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
contact@hulian.design · 021-8888-8888
Date: 2026-06-04
To
Service details
| Project | Quantity | Unit price | Subtotal |
|---|---|---|---|
| Brand official website homepage design | 1 | ¥12,000 | ¥12,000 |
| Component library customization (20 pieces) | 20 | ¥800 | ¥16,000 |
| Front-end image cutting implementation | 1 | ¥8,000 | ¥8,000 |
| Total (tax included) | ¥36,000 | ||
<DocumentSheet size="a4" onPrint={() => window.print()}>
<DocumentSheetHeader>
<div>Hulian Design Studio</div>
<div>Quotation · QT-2026-0604</div>
</DocumentSheetHeader>
<DocumentSheetSection title="Service Details">
<table>{/* Detail line */}</table>
</DocumentSheetSection>
<DocumentSheetFooter>Total·Signature Position</DocumentSheetFooter>
</DocumentSheet>