Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Hospital Finder Map Block for Vue

A labelled sample care finder: choose Emergency, Urgent care, Cardiology or Paediatrics and an insurance plan, and only the places that offer it stay on the drawn map and in the list, shortest typed wait first.

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

Help people find the right kind of care with this hospital finder map for Vue with Ark UI. Careholm, a care finder, draws the invented town of Orrinton as an SVG street map with eight places of care, and says plainly that it is sample data, not medical advice, and that in an emergency you call your local emergency number. Four needs (Emergency, Urgent care, Cardiology, Paediatrics), built from native radios, show how many places offer each under the plan picked in the insurance select. Only places that offer the need and take the plan stay on the map, as a square for a hospital, a diamond for an urgent-care centre or a circle for a clinic; the others stay in place, unseen. The list at the side puts the shortest typed wait first ("About 25 min, sample"), places that are shut at the fixed time last, and the chosen place's address, hours and plans sit under it. A plan nobody takes shows an empty state with a button back to any plan. A polite status line speaks the result once the choice settles. It's built from Native Select, Badge, Empty, Button and Guides, with a CSS entrance only. For care directories, insurers and health-system sites.

FAQ

Are these waits real?

No. Every place, wait, hour and plan is typed sample data, and the page says so in the header text, the caption and the way it words each wait ("About 25 min, sample"). It never shows a live feed. Only wire waits you can vouch for, with the time they were measured, and keep the line that points people to their local emergency number in an emergency.

How do I fill it with my facilities?

Edit FACILITIES. Each has a kind (hospital, urgent or clinic), an address, the plans it takes, opening and closing times and a waits array in the order of NEEDS: minutes for emergency and urgent care, days for cardiology and paediatrics, and 0 for a service it doesn't offer. offers is the one function that decides whether a place shows.

How is the list sorted?

By the wait, converted to minutes, shortest first. A place that is shut at the fixed AS_OF time goes after every open place, with "Closed, opens at 08:00" in its row, so the list never promises a visit that can't happen.

Can I use it without a mouse?

Yes. The needs are radio buttons in one group, so the arrow keys change the need; the insurance is a native select, and each place is a button in the list that fills the detail. The pins are hidden from assistive technology and skipped by the Tab key because the list says the same things in text.

What stays local in the demo, and how do I wire it up?

All of it. Nothing is searched, booked or sent, and no location is asked for. In your app load facilities for the need and plan, and show when each wait was last updated.

How does it look on a phone?

The needs sit in one sideways row above the map, with the insurance under them. The list and the detail stack under the map, and the list scrolls inside its own box.