shadcn.io is not affiliated with official shadcn/ui
Q and A Interview Blog Block for React
An interview told in four question-and-answer bands: the host's question at the start, the guest's answer at the end, both speakers' initials avatars in the header, and one phrase marked with a highlighter.
Installation
Overview
A conversation block for React with Base UI, written for Lintelwick, the journal of an architecture podcast. The header reads "In conversation: Ingrid Solheim and Mateo Duarte" and shows both speakers as initials avatars. Under it, four bands each hold one exchange: the host's question at the start, set as a heading, and the guest's answer at the end, with the speaker's avatar and name above every line. One phrase of one answer is marked with a highlighter that draws across it once. A foot band says how much of the interview is shown and carries the "Read the full interview" link. It's built from Avatar, Highlight Text, Button and Guides, with CSS for the entrance. For podcast write-ups, expert Q&As and founder interviews, anywhere a conversation reads better as turns than as prose.
FAQ
How do I add my own interview?
Edit TURNS at the top of the file. Each turn has a question, an answer in three parts (before, mark, after) and an id. Leave mark empty for no highlight, or put the phrase to emphasise in it and keep the text on either side in before and after. The two speakers are HOST and GUEST; their initials come from the names.
What does the highlighter do, and does it respect reduced motion?
The marked phrase is drawn with the catalog's Highlight Text: a neutral marker (the foreground colour at 12%) that sweeps across the words once, a moment after the page loads. With reduced motion it is simply there. The phrase stays ordinary text in the sentence, so a screen reader reads the answer unbroken.
How does a screen reader tell the speakers apart?
Each question is a level-three heading and the answer follows it, so the headings list every question. Above each line the speaker's name is visible, and a hidden "asks" or "answers" follows it, so the reader hears "Ingrid Solheim asks" and "Mateo Duarte answers". The initials avatars are decoration and are hidden from assistive technology.
How does it fit on a phone?
Each band stacks into one column: the question, then the answer, with the speaker's name above each. The two header avatars drop out below sm to keep the title and the first question on the first screen. Nothing scrolls sideways at 320 pixels.
Related
- Pro
Season Tabs Podcast Blog
Audio, video, photosA podcast index in season tabs: each episode row has its number, title, guest, date, a bar whose length is the episode's minutes against an hour, and a Listen link.
- Pro
Margin Note Editorial Blog
Featured storyThree editor's picks as split rows: the post with a numeral tile at the start and, in a tinted margin cell at the end, the editor's note with a hanging quote mark and a marked reason.
- Pro
Author Frame Guest Post Blog
Article partsA guest post on an outdoors blog: a header with the one Pitch a guest post button, an article under a Guest post badge, and an About the author frame with a bio and three icon links that carry tooltips.
- Pro
Numbered Rail Thread Blog
Story formatsA numbered thread: six parts hung on a vertical rail with their "1/6" chips, the author once at the top, the first four in view and a Show 2 more button that opens the last two.
- Pro
Rapid Fire Interview Team
Culture and valuesRapid-fire answers from five people at a meal-prep company: underline tabs, one per person, and under the chosen one a definition list of the same four questions, so you can read down one person or compare across.
- Pro
Interview Testimonials
Chats and postsA customer interview as a Q&A transcript in a split: a rail with the headline, the interviewee and a Shine Button beside five ruled exchanges, each with its answer set as a quote and a chip with the time it was said.