shadcn.io is not affiliated with official shadcn/ui
DIY Project Chat Block for React Aria
A hardware store mentor's thread with a four-step plant stand card: tools and materials, a drawn diagram for the open step, a safety tickbox that gates the cutting step, and Step done buttons that unlock each next step.
Installation
Overview
Show a shop mentor talking someone through a build, with this DIY project chat for React with React Aria. A hairline frame with a plus mark on each corner holds a window of fixed height for Benchcombe, a hardware store's workshop chat: the top bar names the mentor, Brannoch Tulley, with a count of steps done. The log holds his greeting and a plant stand card: a short list of tools and materials, a difficulty and a total in typed minutes, and four steps in order, with a drawn diagram and a "Step done" button on the open one. The cutting step is behind a gate: it stays locked until you tick "I have goggles and a clamp", and pressing "Step done" without the tick says why it refuses. Finishing a step posts it as your message and, after a Typing Indicator Text, his typed note unlocks the next. The composer's Shine Button, the only colored control, sends typed questions to a script. The frame is ruled by Guides, and everything moves with CSS only. It's the starting point for a how-to chat, a workshop assistant or any guided task with a safety step.
FAQ
What stays in the page, and how do I make it real?
Everything. The mentor's replies come from a short typed script keyed on words such as "goggles" and "wood", one typed note for each step, then one fallback per message and a last line that says it was the last sample reply. Nothing is sent and no model runs, as the line under the composer says. To wire it for real, replace STEPS with your project, save progress where finish runs, and append the mentor's messages to the same list as they arrive.
How does the safety gate work?
The checkbox belongs to step 3. While it is unticked, the open step 3 reads "Locked" and "Step done" refuses: the button stays in place, says why in a reserved line under it, and the status line repeats it. Tick the box and the step reads "Open" and can be finished. The gate is a rule in reasonOf, so adding another gated step means adding its index and its reason.
Why can I only finish the open step?
Steps are in order. Only the step after the last one you finished shows its text, its diagram and its button; the earlier ones read "Done" and the later ones "Waiting". Finishing posts it as your message, and the next step opens once the mentor's note has landed, so you can not send two at once while he is typing.
What are the diagrams?
Small line drawings made from a few SVG shapes: marked boards, a sanded board, a saw line across a clamped board and the assembled stand. They are hidden from assistive technology because the step text says the same thing in words. Swap them for your own drawings by editing Diagram.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, and every message starts with a hidden "Brannoch Tulley, 10:22" or "You, 10:24". The card is a section named by its heading, the steps are an ordered list whose state is a word, the gate is a real checkbox and the refusal is text under the button, never a color. Enter sends and Shift and Enter add a line.