23 / Print & PDF · 12

Print preview frame

Dark-on-light inspection chrome that wraps any printable surface. Toolbar with doc id + format, decorative ruler, dropshadow stage, and a Print button that calls window.print().

Production answer

Print preview frame is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Print preview frame states
Generative search brief

Print preview frame: Dark-on-light inspection chrome that wraps any printable surface. Toolbar with doc id + format, decorative ruler, dropshadow stage, and a Print button that calls window.print().

Use case

Wraps every preview surface inside this section. The dark frame is purely for the web — when you actually print, every dark UI element is hidden by the @media print rules and only the white paper inside survives.

DocumentOFM-DOC-PREVIEW-DEMOPreview frame — minimal sheet inside
Format
A4
Pages
2
Print preview frame demo

The dark surface outside this sheet is the inspection chrome. Click Print to send the inside-only document to the browser print dialog.

The frame composes four pieces. (1) a toolbar with document identity and a real Print button. (2) a decorative ruler line for visual scale. (3) the paper stage with a soft drop-shadow. (4) a status bar at the bottom indicating live preview.

At print time, all of (1) (2) (3) (4) collapse via @media print and the browser prints just the white sheet contents.

Preview frame is the boundary between dashboard and paper.
Live preview · A4Press the print button to open the browser dialog