Layout

PrintSheet

One sheet of paper for something people print or save as PDF: a receipt, an invoice, a certificate, a sheet of recovery codes. On screen it is a white page at paper proportions that shrinks to fit a phone; on paper it is the page itself, dark ink on white even in dark mode, A4 or letter, portrait or landscape. Two sheets are two pages.

import { PrintSheet } from '@alea-design/ui';

Examples

A receipt

One sheet of paper. Dark ink on white even in dark mode; the QR code prints as it should.

Only on paper

Kept out of the screen; when the person presses Print, the sheet is all that prints.

Configurations

Every value of every property, side by side. Numbers match the legend below.

portrait

landscape

printOnly: false

printOnly: true

letter

Orientationorientation
Print OnlyprintOnly
Sizesize

Tokens

The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.

Color

--alea-black…
--alea-white…

Radius

--alea-radius-xs…

Shadow

--alea-shadow-card…

Component

--alea-sheet-h…
--alea-sheet-w…

Props

`PrintSheet` props

Show 10 inherited props

One sheet of paper for a document that people print or save as PDF: a receipt, an invoice, a certificate, a sheet of recovery codes. On screen it is a white page at paper proportions that shrinks to fit a phone; on paper it is the page itself, always dark ink on white even when the app is in dark mode, with the size and orientation you chose. Two sheets one after the other are two pages, and a longer one runs on to the next page. A QRCode inside prints as it should (dark on white).

Prop	Type	Default	Description
`children`	`ReactNode`	none	What goes on the paper.
`orientation`	`"portrait" \| "landscape"`	`"portrait"`	portrait (default) or landscape.
`printOnly`	`boolean`	`false`	Draws the sheet only on paper: it is kept out of the screen and, when printing, everything else on the page is hidden. Use it when the app shows a Print button and the sheet is not part of the screen. Without it the sheet shows on screen as a page and the rest of the page is yours to hide.
`size`	`"a4" \| "letter"`	`"a4"`	The paper: a4 (default) or letter.

Specs

Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.

Variants: orientationportraitlandscape
sizea4letter
Dark and light: Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks: .alea-print-sheet.alea-print-root
Data attributes: data-size=letterdata-orientation=landscapedata-size=a4

A plain container with no role: what you put inside carries the meaning, so use real headings and text.
With printOnly the sheet is out of the screen and out of the accessibility tree; give the Print button a name that says what prints.
The ink is always dark on white, so the page keeps its contrast on a printer and a photocopier, whatever the theme.

Do and don't

Use one sheet per page and let a longer one run on to the next.
Give the Print button a clear name ("Print the recovery sheet").
Put a QRCode inside when the paper has to be scanned: it prints dark on white.

Don't

Don't use it for the screen version of a document: a Card or a page does that.
Don't rely on background colors for meaning: some printers drop them.

In Figma

The properties of the Figma components, generated from the kit, so they always match it. The last column is the React prop each one stands for.

`Print sheet` · 4 variants

Figma property	Kind	Values	Default	React prop
Paper	Variant	A4, Letter	`A4`	`size`
Orientation	Variant	Portrait, Landscape	`Portrait`	`orientation`