shadcn.io is not affiliated with official shadcn/ui
App Download FAQ Block for Radix UI
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 Radix 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 takes asChild with the link inside, so it can be your router's link.