shadcn.io is not affiliated with official shadcn/ui
Healthcare Portal Sidebar Block for Svelte
A clinic portal in a fixed-height window: a Find patient popover with a searchable list of six sample patients, a context chip pinned in the rail, a re-labelled records navigation and the chart in the page.
Installation
Overview
Keep a patient in context while you move through their records with this healthcare portal sidebar for Svelte with Ark UI. A window framed by a hairline with a plus mark on each corner holds the Sidebar: the product's mark, a chip for the patient in context (name, age, record number and an allergy Badge) with a Clear button, the records navigation (Summary, Medications, Results and Appointments, with counts) and the signed-in clinician at the foot. Beside it, a top bar names the patient and the record and holds Find patient, a Shine Button and the only colored control: it opens a Popover with a Command that searches six sample patients. Choosing one pins the chip, re-labels the navigation ("Records: Mirren Quade") and shows that patient's chart in real text; Clear removes the chip and the chart gives way to an Empty state. Every patient, drug and result is made up and the page says it is sample data, not medical advice. The rail collapses to the four record icons, and below the medium breakpoint it becomes a sheet. It's built from Sidebar, Popover, Command, Badge, Empty, Avatar, Shine Button and Guides, with a CSS entrance only. For clinics, case files, CRMs and any app that works on one record at a time.
FAQ
What does pinning a patient change?
Four things, all from one piece of state. The chip in the rail shows the patient's name, age, record number and allergy; the navigation's label becomes "Records: " and the name; the record links show counts for that patient; and the page draws that patient's summary, medications, results or appointments. Clear empties the state, so the chip says nothing is pinned and the page shows an Empty state in the same space, with focus moved to Find patient.
Is any of this real medical data?
No. The six patients, their drugs, doses and results are invented for the demo and typed in PATIENTS; the page says "Sample data, not medical advice" under the top bar. Nothing is looked up, stored or sent. In a real portal, keep patient data on the server behind the user's permissions, never in the page's source, and ask for the minimum when the chip is shown.
What stays in the page, and how do I connect it?
Everything. The search runs over the typed list in the block, and nothing leaves the tab; reloading starts over. Replace the list with a search against your API and keep the rest. The records are links to # whose handler shows the record instead of navigating.
How does it work on a phone?
Below the medium breakpoint the sidebar becomes a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. Find patient stays in the top bar, so you can change patient without opening the sheet, and the status line at the foot of the window states the live result ("Mirren Quade pinned. Allergy: penicillin."). Escape or choosing a record closes the sheet and focus goes back to the menu button.
What happens when the sidebar collapses?
The menu button or the rail along the sidebar's edge folds it to icons. The chip has no folded form, so it gives way, and the four record icons stay, each with a tooltip that includes its count. The patient's name remains in the top bar. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
Is it accessible?
The sidebar is a navigation landmark named after the product, and the open record is marked as the current page. The Clear button is named for the patient it clears. The popover takes focus into its search box when it opens, arrow keys move through the matches, Enter picks one and Escape closes it with focus back on Find patient. One polite status line reports each change, and names and record numbers are isolated so they read right in a right-to-left layout.