shadcn.io is not affiliated with official shadcn/ui
Share Popover FAQ Block for Vue
A FAQ for an event ticketing platform whose open answer ends in a Share button: a popover with a copy-link button, an email and a QR code of the answer's link.
Installation
Overview
A shareable FAQ for Vue with Ark UI. Six questions sit in hairline rows that run from rail to rail while their text keeps to a centred column, each marked by a ringed chevron that turns over when the row opens. The open answer ends in a Share button; it opens a small popover with the answer's link in a copy button, an email with the answer quoted, and, on a screen wide enough to have a phone nearby, a QR code that opens the answer on one. The page's rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack. It's built from Accordion, Popover, Copy Button, QR Code, Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For ticketing, support and help pages where an answer is worth forwarding.
FAQ
What does the Share popover offer?
Three things, none of them a brand's button. Copy link puts the answer's address on the clipboard and says "Link copied" to screen readers. Email opens the visitor's mail app with the question as the subject and the answer and its link as the body. The QR code is drawn in the browser from the same address, with nothing sent anywhere, and says to scan it to open the answer on a phone. It's hidden on a phone, where there's no other screen to scan from.
Where do the links point?
answerUrl builds https://gatehouse.example/help/<question id> for each question. Change its host and path to your own pages; the copy button, the email and the QR code all read it. mailto builds the email, encoding the question and the answer for the address.
How does the popover behave with a keyboard and a screen reader?
The Share button opens the popover and moves focus into it; Tab walks through Copy link and Email, and Escape or a click outside closes it and returns focus to the button. The popover has a title, "Share this answer", and the QR code is a named image. Each question is a button inside its own h3, with the ringed chevron hidden from assistive technology.
The Up and Down arrows also move between questions, and Home and End jump to the first and last.
How is Email wired?
It's a link with a mailto: address, so it works in any mail app.
The button takes asChild with the link inside, so it can be your router's link.
Does the QR code follow the theme?
No, on purpose: a QR code needs dark modules on a light ground to scan, so it stays black on white in every theme, with a hairline ring to set it off in dark mode. Everything else in the popover takes your theme's tokens.
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. Search engines and server rendering see all of them, and closing an answer doesn't remove it.
How does it fit on a phone?
The rows keep their hairlines from rail to rail and the text fills the screen with a 24 pixel margin. The popover is as wide as the screen allows, up to 20 rem, without the QR code, and nothing scrolls sideways at 320 pixels. Pressing Share inside an open answer never moves the rows.