shadcn.io is not affiliated with official shadcn/ui
Emergency Popover Healthcare Navbar Block for Ark UI
A patient-portal navbar with an Emergency button that opens a popover with a call-your-emergency-number notice and a tel: link to the nurse line, beside links with unread and refill counts.
Installation
Overview
A navbar for a clinic's patient portal in React with Ark UI. The wordmark of Cedarfield Health leads, and Appointments, Records, Messages and Prescriptions follow as links, the current page marked by a foreground stroke on the bar's bottom edge; Messages carries a chip with its unread count and Prescriptions the refills due, and each link's name says what its count means ("Messages, 3 unread"). Past a vertical divider that meets the top rule, an Emergency button stays in the bar at every width. It opens a popover that first says to call your local emergency number for anything life-threatening, then offers a tel: link to the nurse line for urgent questions that aren't, with its hours; a Book a visit Shine Button closes the row. The button's siren icon takes the destructive token while its text stays foreground. Below lg the links fold into a sheet from the top. It's built from Popover, Badge, Button, Navigation Menu, Sheet, Shine Button and Guides. The number is a fictional one in the 555 range and the counts are example data; the block is not a medical service. For clinic and patient portals.
FAQ
How do I use my own number and counts?
Edit NURSE (the tel: address and how the number reads) and the count and meaning of each entry in PAGES. The number shown is fictional (555 range); replace it with your own, and keep the sentence that tells people to call their local emergency number for a life-threatening emergency: a portal is not an emergency service.
Why is the emergency notice before the phone number?
The popover leads with the instruction, so someone in danger reads it before anything else and is never sent to a nurse line instead of emergency services. The nurse line is offered underneath as the way to ask an urgent question that isn't life-threatening.
Why is only the icon red?
Small destructive-coloured text fails contrast in some dark themes, so the siren icon carries the status token and the label stays in the foreground colour. The popover is white-on-popover like any other, and the Shine Button stays the one primary control.
How does the popover work with a keyboard?
Enter or Space opens it and moves focus into it; Tab reaches the call link; Escape or a click outside closes it and returns focus to Emergency. It isn't modal, so the bar stays reachable.