Patient dashboard
Good morning, Alex
A little room for your health, and the rest of your day.
Movement
24 of 40 min
Time outside
18 of 30 min
Mindful pauses
2 of 3 pauses
Fictional activity records and personal targets.
Small steps still count.
A conversation about you
Sample appointment- Clinician
- Dr. Sam Ellis · Fictional clinician
- Location
- Northmere practice
Latest readings
Resting heart rate
64bpm
Recorded
Sleep recorded
7 h 35min
Recorded
Steps recorded
4,280steps
Recorded
Explore the overview → inspect readings or care → prepare a visit and save a local note
View sourceAbout this download
A standalone Vite and React project using Vlak 0.5.0. Extract the ZIP, open its folder, then run npm install and npm run dev. Requires Node 22.12 or newer.
Patients and medical records are fictional interface fixtures, not clinical advice. Local notes and acknowledgements do not prescribe treatment, contact patients or update a care system.
Installation and base examplesInside the interface
A fictional patient space that separates the daily overview from detailed readings and care records. Personal activity goals share the overview with the next sample appointment. Visit preparation opens a focused note editor, and care tasks retain their own recorded state without implying a clinical update.
All people, measurements, goals, medication entries, and appointments are fictional. Record a sample dose, complete a care task, or save a visit note and preference locally. No clinical record, appointment booking, or message is sent.
Watch the 20-second walkthrough
A short walkthrough of the working patient dashboard study.
Use this as a starting point
Build with Vlak
Install the components, add the stylesheet, and bring your own content. The study’s source shows how the pieces fit together.
npm install @noorddev/vlak-reactimport "@noorddev/vlak-react/css";Start with your coding agent
A ready-to-use brief with this study, Vlak’s components, and the design guide.
Component modifications
- Patient banner establishes the fictional record, while Health metric and Activity rings display supplied readings and personal targets without calculating a health score.
- Lab results lives on a separate reading screen. Medication schedule and Care plan keep explicit sample record states and pass changes into local application storage.
- Appointment card opens a focused preparation form built with Select and Textarea. Saving changes only the local note and contact preference; the appointment's supplied status stays separate.
- At 640px and below, Overview, Readings, and Care move into bottom navigation. A selected visit replaces those screens with its own Back header, scrolling note form, and pinned save action. Returning restores the invoking control and keeps local records intact.