shadcn.io is not affiliated with official shadcn/ui
App Download FAQ Block for React
A FAQ for a habit-tracking app: six questions in an accordion beside a download card in a card, where a Phone or Watch choice swaps a real QR code, the minimum OS and the store link.
Installation
Overview
An app-download FAQ for React with Base UI. The start column holds the title, one sentence and six questions in an accordion; the end column, behind a split divider, holds a download card in a card. A Phone or Watch choice in the card swaps a real QR code (it encodes the store address), the minimum OS, the file size, what it pairs with and the store link. On a phone the QR hides, since you're already on the device, and the card follows the questions under a rule with + marks. The rails and top rule come from the Guides spine, so the block lines up with its neighbours. It's built from Accordion, Qr Code, Segment Group, Data List, Shine Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For product pages and docs home pages that point visitors to an app.
FAQ
How do I change the devices, versions and links?
Edit DEVICES at the top of the file: each device has an id, a label, the needs and size lines, what it pairs with, and the href that both the QR code and the store link use. Point href at your store listing, or at a short link of yours that redirects by device. The questions are in QUESTIONS, and OPEN_QUESTION names the one that's open on load.
Is the QR code real?
Yes. It's the catalog's Qr Code, drawn from the device's href, and it changes when you switch device. It has dark modules on a white tile with a quiet border in every theme, because scanners need that contrast. Its aria-label says where it leads, and the store link beside it does the same job for anyone who can't scan.
How does the Phone and Watch choice work?
It's a Segment Group, so it behaves as one choice from a radio group: the arrow keys move and choose, and exactly one is always on. The card keeps its height when you switch, because every device has the same three lines. Rename the devices to match your own platforms: the labels here are neutral on purpose.
Where does the store button go?
It's a link to the device's href, and the block's one Shine Button: a band of light sweeps across it once on hover and keyboard focus. Its label stays the same for both devices; a visually hidden "for your phone" or "for your watch" says which.
The button renders the link it's given with render, with nativeButton={false}.
Related
- Pro
Share Popover FAQ
Reading and sharingA 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.
- Pro
QR Download Split Banner
Split calloutsA scan-to-install callout for a mobile app: a real QR code in a card in card with a caption, beside the heading, one sentence and links to both store listings.
- Pro
Accordion FAQ
Accordion listsA side-header FAQ for a web analytics tool: the title, one sentence and a contact prompt beside seven questions in an accordion, behind a split divider.
- Pro
FAQ with Contact Card
Contact and signupAn FAQ beside a contact card for an energy supplier: seven questions in an accordion, and behind a split divider a sticky card in card with email, live chat status, phone hours and a Shine Button.
- Pro
Split Panel Phone QR Code CTA
Product previewsA split CTA for a habit app between solid rails: copy and a Shine Button that emails the link beside a phone, in a hairline frame, whose screen is a scannable QR code.
- Pro
Procurement Pack FAQ
Calculators and toolsA FAQ for a data platform with a procurement pack beside the questions: three documents as checkboxes with a live count, an email field and one Shine Button that requests what is ticked.