shadcn.io is not affiliated with official shadcn/ui
Export PDF Changelog Block for React
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 Base 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 items and a plain value, and the checkboxes report a boolean.
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.
Related
- Pro
Release Notes Changelog
Spotlights and mediaOne release written as a long article behind a split divider, with a sticky contents list that marks the section on screen and turns into a row of chips on a phone.
- Pro
Filterable Changelog
Filters and browsingThe plainest filtered release list: one row of choices with counts (All, New, Improved, Fixed, Security) over nine releases, a live count of what is showing, and a height that never changes.
- Pro
Release Range Comparison Changelog
Filters and browsingA split with two release selects, a count of what changed between them as New, Improved, Fixed and Breaking, and the releases in the range as an ordered list.
- ###Pro
Copy Link Changelog
Votes and sharingThree docs-host releases, each its own cell with an anchor and a Copy link button that puts that release's permalink on the clipboard and says so, with a :target ring on the one the address points at.
- Pro
Plain and Technical Customer Changelog
Roadmap and customersA release list for a clinic booking product that tells each of three releases in two wordings, switched in place by a Plain / Technical control at the header's end.
- Pro
Release Timeline Changelog
Lists and timelinesA release timeline for an API client: a compact header with a Subscribe link, then the latest four releases on a hairline rail with dots, each with its version, date, type tags, a linked title and its notes, and View all releases at the foot.