shadcn.io is not affiliated with official shadcn/ui
Mental Health Chat Block for React
A wellbeing coach asks how you are arriving and answers with an exercise card: a 12 second breathing round with a pausable ring, a 5-4-3-2-1 grounding checklist or a body-scan step list.
Installation
Overview
Show a guided check-in with this mental health chat for React with Base UI. A narrow framed window of fixed height holds a thread with Hana Whitcombe, a wellbeing coach at Hushlight, under a strip that says it is a sample conversation, not therapy or medical care, and that in danger you call your local emergency number. She asks how you are arriving with three reply buttons, Anxious, Low and Restless, and each answer posts a different card in the log. Anxious brings a breathing round of twelve seconds in four steps of three, drawn as a ring that grows and shrinks with the phase word and a seconds count, started with Start and stoppable with Pause. Low brings a 5-4-3-2-1 grounding list of five Checkbox lines. Restless brings a body scan of five places with a Next step button. The composer's Shine Button is the only colored control. The frame is ruled by Guides. It suits a wellbeing app, a workplace support line or any gentle check-in.
FAQ
What stays in the page, and how do I make it real?
Everything. Hana's replies, the three exercises and the progress on each card are typed or held in the page's state; nothing is sent and no model runs. To make it real, send post's text to your coach or support service where the code says so, and store card progress against the member's session.
How does the breathing round work?
One round is twelve seconds: breathe in, hold, breathe out, hold, three seconds each. It starts only when you press Start, can be paused and resumed, stops by itself at the end and says so. Under reduced motion the ring is gone and Next phase steps through the four words instead.
Is this therapy or medical care?
No. A strip says so and names the local emergency number in words. A message that suggests danger gets a short line pointing to an emergency number or a crisis line, and the chat can reach no one.
Why does each exercise appear once?
Pressing Anxious twice would give two cards sharing one timer. The second time Hana says the card is already above, so the state on each card stays honest.
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, 14:09". Delivery is a glyph and a word, never a color. The phase word and seconds are decorative and hidden from assistive tech; the status line announces Start, Pause and the end of the round. Nothing is told by color.