shadcn.io is not affiliated with official shadcn/ui
Print-Friendly FAQ Block for Ark UI
An FAQ you can take on the trail, for a park visitor service: eight accordion rows, a Print this FAQ button and real print styles that open every answer and drop the controls.
Installation
Overview
A print-friendly FAQ for React with Ark UI. A start-aligned header carries a "Print this FAQ" button at its end, with a line under it saying what printing does; under it, eight accordion rows run from rail to rail under a rule with + marks, each with a plus in a small square that turns into a minus. On screen it reads like any accordion. On paper it changes: a plain list of every question with its answer replaces the accordion, the button and the lines are gone, text is black whatever your theme, entries never split across pages, and a line at the foot tells the reader to check for changes. It's built from Accordion, Guides and Button, with CSS transitions for the entrance and your theme's tokens for every colour. For visitor guides, policies and rules that people keep in a bag or on a fridge.
FAQ
How does the print layout work?
The button calls window.print(), and the page's print: styles do the rest. The accordion, the spine's lines, the band's rule, the button and its note are hidden; a plain list of every question with its answer, hidden on screen, appears in their place; each entry avoids breaking across pages; and a one-line footnote appears at the foot. Colours are set with three variables on the section (--foreground, --muted-foreground, --border), so a dark theme still prints black on white. Browsers leave out background colours by default, and nothing here relies on one.
Why is there a second list for printing?
Because it works the same on every library and can't be broken by how an accordion hides its closed answers: a closed panel is hidden by the browser's own hidden attribute, which a print style can't reliably undo. The list is a dl that's display: none on screen, so screen readers skip it and the page shows each answer once. It's built from the same QUESTIONS array as the rows, so the two can't drift apart.
The rows also keep every answer in the markup (lazyMount={false}, unmountOnExit={false}).
Does the note under the button stay true?
Yes. It counts the questions from the same QUESTIONS array the rows are built from, so adding or removing one updates "Prints all 8 answers". It doesn't promise a page count, because that depends on the browser, the paper and the reader's font size.
How does it work with a keyboard and a screen reader?
Each question is a button inside its own h3 under the section's h2, and the print button is a real button with its text. Tab moves between the print button and the questions; Enter or Space opens and closes a row, and the button says whether it's expanded.
The Up and Down arrows also move between questions, and Home and End jump to the first and last.