Patient dashboard
Build with VlakGood 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 sourceInside 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.
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.