Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Healthcare Triage Chat Block for Radix UI

A nurse line's thread with an unsent intake form in the log, a typed reply that depends on how long it has been, and a card of three visit times to request, labelled as an example and never as medical advice.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show a patient talking to a clinic's nurse line, with this healthcare triage chat for React with Radix UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Clinichurst, a clinic: the top bar names the nurse, Halldora Whitcombe, and a note under it stays in place to say that this is an example, not medical advice, and that in an emergency you call your local emergency number. The log holds her greeting and an intake card that is still unsent: a native select for the age range, three choices for how long it has been, and a Textarea for a few words. Sending the card posts your answers as a message and, after a Typing Indicator Text, her typed reply for that duration and a second card of three visit times. "Request visit" posts your pick, and the card says that nothing was booked. The composer's Shine Button, the only colored control, sends typed text; words such as "chest" or "breathing" are answered with the emergency number in words. The frame is ruled by Guides, and everything moves with CSS only. It's the starting point for a nurse line, a clinic's intake chat or any thread that gathers a few answers before offering a time.

FAQ

What stays in the page, and how do I make it real?

Everything. The nurse's replies are three typed answers keyed by how long it has been, two keyed on words such as "chest" or "thanks", then one fallback per message and a last line that says it was the last sample reply. Nothing is sent, no model runs, and no visit is booked, as the card and the line under the composer say. To wire it for real, send the form's answers and the chosen time to your clinic's system where sendIntake and requestVisit call speak, and append the nurse's messages to the same list as they arrive.

Does it give medical advice?

No. The note under the top bar says it is an example and not medical advice on every visit, and the typed replies only offer general words and a visit. Nothing is assessed: there is no urgency level, no colour and no decision tree. Words that may mean an emergency get one answer, to call your local emergency number, which is named in words because the right number depends on where you are. Replace the sample text with your clinic's own guidance and have it reviewed before you use it.

How does the intake card work?

It is an ordinary form in the log. The age range is a native select, "How long has it been?" is a group of three radio rows in a fieldset, and the notes are optional. Pressing "Send form" without choosing a duration shows the problem in a reserved line, so the card never changes height; once it is sent every control is read-only and the button says "Form sent". The summary is posted as your message, so the thread reads as a record of what you sent.

What happens when I request a visit?

The visit card holds three typed times as radio rows. "Request visit" with nothing chosen says so in its reserved line; with a time chosen it posts your request, spends the card and writes "Requested Wed 14 Oct, 10:30. Nothing was booked." under the button. The nurse answers with a typed line. Times and dates are typed in the file, so the demo reads the same on every visit.

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 "Halldora Whitcombe, 09:12" or "You, 09:14". Each card is a form named by its heading, the radios are real radios with arrow-key stepping, the problem lines are alerts, and the composer's status line is the one live region. Enter sends and Shift and Enter add a line; the avatars are hidden because the name is always in text.

How does it look on a phone?

The same single column: the "Example only" badge drops out of the top bar below the small breakpoint, but the note under it stays, the cards keep their width inside the log and the composer keeps its place at the foot. The window keeps its height and only the log scrolls, even at 320 px wide.