shadcn.io is not affiliated with official shadcn/ui
Export PDF Changelog Block for Ark UI
A printable release-notes sheet for a docs-publishing tool: pick a release, tick the types of change to include, watch the drawn paper sheet re-flow, and print it or save it as a PDF through the browser's print dialog.
Installation
Overview
A release-notes export for React with Ark UI, written for Leafbind, a fictional docs-publishing tool. A split on a hairline divider: at the start a drawn paper sheet in a corner frame, showing the chosen release's changes grouped by type with a page line at its foot; at the end a Select to choose among five releases, a checkbox for each type of change (New, Improved, Fixed, Security, each with the number of changes it holds in that release) and one Shine Button, "Print or save as PDF". Ticking a type adds or removes its group from the sheet at once, and a polite status says how many changes and about how many pages the sheet holds. The button really prints: it writes the same sheet, with its own page margins and print styles, into a hidden frame and calls the browser's print dialog, where "Save as PDF" is one of the destinations. Nothing is uploaded and the page itself makes no file. The sheet keeps one height whatever you choose, so nothing around it moves. On a phone the controls come first and the sheet sits under them. It's built from Guides, Select, Checkbox, Field and Shine Button, with your theme's tokens for every colour. The releases are example data.
FAQ
Does it make a PDF?
Not by itself. The button calls window.print() on a hidden frame that holds only the release notes, so the browser's print dialog shows the notes and nothing else from the page. Choose "Save as PDF" (or a printer) there. No library, no server and no upload is involved, which also means the PDF's look is the browser's: the sheet's print styles set the page margin, the type and system colours.
How do I change the releases and the types?
Edit RELEASES at the top of the file, newest first: each release has a version, a date as an ISO day and a list of changes, each with a kind and a text. The kinds (NEW, IMPROVED, FIXED, SECURITY) are constants listed in KINDS, in the order they print. The Select's options, the counts beside each checkbox, the sheet and the printed document all come from that data.
What happens if I untick every type?
The sheet says no type is included, the status says so, and the print button is disabled until you tick one again, so you can't print an empty page. The sheet's height doesn't change.
Is it usable without a mouse or a screen?
Yes. The release Select, each checkbox and the button are real controls in reading order, each named (the checkboxes by their type and their count), with visible focus. The status line is a polite live region, so changing a choice reads out the new count. The sheet is plain text in a figure with a caption, not an image, and the printed document is a normal page with headings and lists.
Is it the same on every React base and port?
The layout and the printing are the same everywhere; only the controls' wiring differs. The Vue, Svelte and Solid ports use the same hidden-frame print.
The Select takes a list collection and a value array, and the checkboxes report details.checked.
How does it fit on a phone and in a right-to-left layout?
Below lg the controls stack above the sheet, the button and the Select go full width, and the sheet scales down with a fade at its foot rather than scrolling. In a right-to-left layout the divider and the corner frame move to the other side and the version stays in reading order.