A collection of open-source medical device UI components built with React, Next.js, TypeScript, and Tailwind CSS. Each component simulates a real device interface. Designed with clinical clarity, accessibility, and attention to detail.
| Interface | Description |
|---|---|
| Vital Signs Monitor | ICU patient monitor with live ECG waveform, heart rate, SpO₂, and blood pressure. Built with React and the Canvas API. |
| Home Blood Pressure Monitor | Consumer-grade BP monitor with 7-segment LCD, AHA bar indicator, dual-user memory, and START/STOP interaction. |
| Glucometer | Blood glucose monitor with LCD display, meal indicator, strip slot, day/average log, blinking LED, and ADA zone classification. |
| Pulse Oximeter | Fingertip oximeter replicating the LCD display, plethysmography signal bars, and battery indicator with live SpO₂ simulation. |
# Install dependencies
npm install
# Run the dev server
npm run devOpen http://localhost:3000 to see it running.
# Build for production
npm run build
npm run startRequirements: Node.js 18+, npm 9+
- Next.js 16 App Router
- React 19
- TypeScript 5
- Tailwind CSS 4
- Lucide React icons
- Canvas API ECG waveform rendering
Between 2024 and early 2026 I was involved in several medtech projects working at the intersection of hardware, clinical workflows, and software. Those experiences shaped the way I think about medical interfaces: precision matters, clarity saves time, and every pixel carries responsibility.
Medical device screens are some of the most constrained, high-stakes UI surfaces that exist. They need to communicate critical information at a glance, under stress, in low-light environments, to users who may not be technically trained. Recreating them with modern web tooling is a way to study those constraints and to make this kind of interface thinking more accessible to designers and developers who haven't worked in the field.
This project started as a personal exploration of those ideas rebuilding the interfaces I encountered in the field with modern web tooling and open-source principles.
More components are on the way, and not just medtech. The plan is to expand into other domains where specialized device UIs matter: fitness, environmental monitoring, industrial, and beyond.
I believe vital signs monitoring blood pressure, glucose, oxygen saturation should be accessible to everyone, not just those inside a clinic. The hardware exists. The mobile platforms exist. What's missing is thoughtful design that bridges the gap between medical-grade accuracy and everyday usability.
If you're working on a mobile-connected medical device and want a design or front-end collaborator, I'd love to hear about it.
MIT free to use, modify, and distribute. See LICENSE for details.
Designed & built with Next.js, Tailwind CSS, and shadcn/ui by Alejandro A. Gerbec