Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Rapid Fire Interview Team Block for Ark UI

Rapid-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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An interview section for React with Ark UI, for Rosedale, a meal-prep app. A compact header says how many questions were asked of how many people, and under it a band of underline tabs, one per person, each with an initials avatar and a first name, runs from rail to rail with + marks on its rule. The chosen person's page opens with their name and role on a band, then a definition list of the same four questions (a favourite tool, a superpower, one piece of advice, the Sunday tray) with a short answer each, in rows that end the block. Every page shares the height of the tallest, so switching moves nothing. On a phone the tabs scroll sideways and each answer stacks under its question. It's built from Tabs, Data List, Avatar and Guides, with your theme's tokens for every colour. The people and their answers are made up for the example.

FAQ

How do I change the questions and the people?

Edit QUESTIONS and PEOPLE at the top of the file. A person has an id, a name, a role, a short name for the tab and their answers in the same order as the questions. The header's counts come from those two lists. Keep the answers to a sentence each: it is the rapid-fire part.

How does the keyboard work?

It is a tab list: Tab moves into it, and the Left and Right arrow keys move between people. The chosen person's page is reachable with Tab after the list. Each page is a dl, so a screen reader reads each question and its answer as a pair.

Does the block change height when I pick another person?

No. Each page is laid out invisibly, all five in the same cell, behind the visible one, so the block is as tall as the longest page at the current width. The invisible copies are hidden from assistive technology and the keyboard.

How do I compare two people's answers?

Pick one, read down the list, pick the other. The questions stay in the same place on every page, so the eye reads the difference. If you want them side by side, a table with the people as columns is a better shape; this block is for reading one person at a time.

What changes on a phone?

The tab list scrolls sideways, with a fade at its end saying there are more people, and each question stacks above its answer instead of sitting beside it. The list is the last thing in the block, so nothing sits under the final answer.

Are the avatars read out?

No. The initials in the tabs and on the band are decoration; each tab is named by the person's first name, and the page starts with their full name and role.

All 126 team blocks