Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Vet Consultation Chat Block for Radix UI

A vet's thread with a symptom checklist card: tick symptoms, pick how long, send them as a message and get a three part read-out in collapsible sections chosen by the most serious symptom.

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 vet clinic's chat with this vet consultation chat for React with Radix UI. A framed window of fixed height holds a thread with Dr. Imran Rao, a small-animals vet at Barkwell, about Pip, a cat of six. A strip says it is an example only, not veterinary advice, and that in an emergency you call your nearest emergency vet. The first card is a symptom checklist of six Checkbox lines, Sneezing, Limping, Low appetite, Vomiting, Lethargy and Scratching, with a Since select and a Send symptoms button. Sending posts your list as a message, and the vet's reply is a card of three Collapsible sections, What this could mean, What to do now and When to call us, taken from a typed table by the most serious symptom you ticked. The composer's Shine Button is the only colored control. The frame is ruled by Guides. It suits a vet clinic, an animal hospital or any triage that ends in three plain parts.

FAQ

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

Everything. The checklist, the six read-outs and the replies are typed in this file, and ticks live in the page's state. Nothing is sent and no model runs. To make it real, send the ticked list from sendSymptoms to your clinic's triage service and render the read-out it returns in the same three sections.

How is the read-out chosen?

The symptoms are listed in a typed order from most to least serious: lethargy, vomiting, low appetite, limping, scratching, sneezing. The first one you ticked in that order picks the read-out, whatever else is ticked.

Is this veterinary advice?

No. The strip and the read-out both say Example only. A message naming an emergency, such as poison or a seizure, gets a line telling you to call an emergency vet at once.

What if nothing is ticked?

Send symptoms says to tick at least one symptom first and posts nothing.

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 checklist is a fieldset with a legend, each box is named by its label, and the three sections are buttons that report open or closed. Nothing is told by color.

How does it look on a phone?

The checklist keeps two columns, the Since select sits under it and the read-out sections stack full width. The window keeps its height and only the log scrolls, even at 320 px wide.