shadcn.io is not affiliated with official shadcn/ui
Images FAQ Block for Vue
A photo-gallery FAQ whose open answers split into words and a framed greyscale drawing of the screen they describe: a share dialog, backup settings, an export menu, a search, an album picker and the trash.
Installation
Overview
An FAQ for Vue with Ark UI where each answer shows the screen it talks about. A centred header sits over a band of six questions that run from rail to rail under a rule with + marks, their text held to a 56rem column. From the md breakpoint an open answer splits in two: the words at the start, and at the end a drawing of the screen in a frame with corner marks. The drawings are greyscale UI built in CSS, with a sun-and-ridge pattern standing in for photos, and use only your theme's tokens, so they look right in every preset, light or dark. On a phone the drawing sits under the words. It's built from Accordion and Guides. For apps and products whose questions are easiest to answer by pointing at a screen.
FAQ
Are the drawings images or code?
Code: each is a small component of spans, borders and a few SVG shapes, so it scales sharply, follows the theme and adds no image to download. The photo thumbnails are a sun and a ridge drawn in SVG with currentColor, three shapes that repeat. To show your own screens, swap a drawing component for your own markup or an img with a text alternative.
What do screen readers hear for the drawings?
Nothing: each drawing is hidden from assistive technology and inert, so its mock buttons and switches can't be focused or pressed. The answer's words say everything the screen shows, which is the rule for a decorative illustration. If you swap in a screenshot that carries information the words don't, give it a real alt.
How do I add a question with its own drawing?
Add an entry to QUESTIONS, write a drawing component beside the others, and add one line to the Canvas in the answer that shows it when the question's id matches. Reuse the small parts, Photo and the mock switch, to keep the set consistent.
Are the closed answers in the page's markup?
Yes. The Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer renders from the start, hidden until its question opens.
How does it work with a keyboard?
Each question is a button inside its own h3 under the section's h2. Tab moves from question to question and Enter or Space opens one; 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.