Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Medical Consultation Chat Block for Svelte

A telehealth thread with a doctor that ends in a sample prescription card you can add to a Medicines popover, plus a Book a follow-up popover of three typed slots, under a strip that says it is not 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 telehealth visit with this medical consultation chat for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Oakwick Telecare, a telehealth clinic: the top bar names the doctor, Dr. Amara Voss, and holds a Medicines popover, and a strip under it says this is a sample conversation, not medical advice, with no clinician connected, and that an emergency means calling your local emergency number. The thread is a short consult in Message and Bubble rows ending in a sample prescription card: a description list of medicine, dose, frequency and duration with an Add to my medicines Toggle. Adding it puts it in the Medicines Popover with a typed next dose and Remove. Book a follow-up opens three typed slots; picking one posts a line and gets a typed confirmation. The composer's Shine Button is the only colored control. The frame is ruled by Guides. It suits a telehealth app, a clinic portal or any consultation that ends in something to keep.

FAQ

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

Everything. The consult, the prescription, the three slots and the replies are typed in this file, and your medicines list lives in the page's state for this tab only. Nothing is sent and no model runs. To make it real, send post's text to your clinic's messaging service where the code says so, load the prescription from the visit record, and save the list through your patient API.

Is this medical advice?

No. The strip says so, and so does the prescription card's Example only badge. The medicine name is invented and the replies are a short script. A message that names an emergency, such as trouble breathing, gets a line telling the person to call their local emergency number.

How does the Medicines list work?

Turning on Add to my medicines puts Verolin 250 mg in the popover with a typed next dose; Remove or turning the toggle off takes it out, and the count in the top bar follows. The popover says the list is kept in this tab only.

What does Book a follow-up do?

It opens a popover of three typed slots. Choosing one closes it, posts Please book me in for that slot as your message and gets a typed confirmation. No calendar is read or written.

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 prescription is a description list, the toggle reports its pressed state, and both popovers are labelled. Nothing is told by color.

How does it look on a phone?

Bubbles take up to 80% of the width, the strip wraps onto two lines and the Medicines button keeps its count. The window keeps its height and only the log scrolls, even at 320 px wide.