shadcn.io is not affiliated with official shadcn/ui
Interview Prep Chat Block for React
A mock interview with question cards, a collapsible sample answer with talking points, a Rough, OK or Nailed it self-rating and a summary of the ones to revisit.
Installation
Overview
Run a mock interview inside a chat with this interview prep chat for React with Base UI. A framed window of fixed height holds the thread between you and Dara Mbeki, a career coach at Panelford: the top bar and a hairline Progress show "Question 2 of 5", each question arrives as a card with a category Badge and a difficulty word with a signal glyph, and you answer in the composer in any words. She replies with a "Sample answer" card whose Collapsible opens three talking points, and you rate yourself Rough, OK or Nailed it on a Toggle Group: your rating posts as your message and the next question arrives. After the fifth, a summary card lists the Rough ones as "N to revisit". It is self-rating only; nothing scores your answer. The composer's Shine Button is the only colored control. The frame is ruled by Guides, and everything moves with CSS only. It suits a career-coaching service, a hiring-practice tool or any structured Q and A.
FAQ
What stays in the page, and how do I make it real?
Everything. The five questions and their talking points are typed in QUESTIONS, the ratings live in the page's state and the replies come from a short typed script. Nothing is sent and no model runs, as the line under the composer says. To make it real, send your answer where post says so, append the coach's sample answer card when it arrives, and save the ratings from rate.
How does the rating work, and is my answer scored?
It is not scored: the block never reads what you wrote. After you answer, you choose Rough, OK or Nailed it yourself. The choice posts as your message, the group keeps showing what you picked and cannot be changed afterwards, the progress moves on and the next question card arrives.
Where does the revisit list come from?
From the ratings, counted when the summary card is drawn: every question you rated Rough counts toward "N to revisit", and the card lists all five with their ratings. Rate all five and the summary appears after the last one.
How is this different from the AI interview coach?
That block grades an answer against a rubric. This one is a conversation with a coach in which you grade yourself, so it needs no scoring logic and works the same with a real person on the other end.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden name and time such as "You, 09:42". Delivery is a glyph and a word, never a color. The rating group is named for its question, the sample's talking points sit in a list inside a collapsible whose content is inert while closed, and the difficulty is a word as well as a glyph.