shadcn.io is not affiliated with official shadcn/ui
Onboarding Wizard Chat Block for Ark UI
A setup concierge thread where each of four questions arrives as a card that is the input (team name, channels, teammates, notification level), with a live workspace preview beside it and one Create workspace button.
Installation
Overview
Set up a workspace by talking to it, with this onboarding wizard chat for React with Ark UI. A hairline frame holds a window of fixed height for Hearthstead, a team workspace: its setup guide, Hearthstead Bot, asks four things in turn and each question is a card in the log that takes the answer, so there is no composer. A team name Input, Checkboxes for the channels, an email field that builds a list of removable invitations and three notification levels as radio rows each end in Next or Skip this step. The Your workspace pane at the end draws the name, the # channels, how many are invited and the level as you answer, and the last card holds the one Shine Button, Create workspace. On a phone a Chat and Preview switch shows one pane at a time.
FAQ
What stays in the page, and how do I make it real?
Everything. The bot's four questions are a typed list in this file, one per step, and no model runs. The answers, the invitation list and the saved flag live in state, and nothing is created or emailed, as the status line says. To wire it for real, send the answers from finish to your workspace service and send the invitations there.
How do the steps work?
Each card is a form. Next validates the step (a team name is required, an invitation must look like an email and not repeat), posts your answer as a message and, after a short typing line, the next question. Finished cards fold into one line with a check glyph. Skip this step posts the skip and moves on, and Start over returns to the first question.
What does the preview show?
The workspace as the answers shape it: a lettermark tile and the name, the chosen channels, the number invited with up to three addresses, and the notification level. Space is held for the lists so the pane does not jump as they fill.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log. Focus moves into each new card when its question arrives, Enter in the invitation field adds an address instead of submitting, problems are announced as alerts, and the step and the result are also in text: Step 2 of 4 is a sentence and the dots are hidden. The avatars are hidden because the name is always in text.