# CPR Metronome Chest Compression UI in SwiftUI, Free

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-06-01, updated 2026-06-02. 5 min read.
> Source: https://vp0.com/blogs/cpr-metronome-chest-compression-ui-swiftui

A CPR metronome keeps compressions at the right pace during practice. It must be unmistakable and never replace calling emergency services or real training.

**TL;DR.** A CPR metronome app gives a steady 100 to 120 beats-per-minute pace for practicing chest compressions, with a big visual beat, audio, and haptics. Build it free from a VP0 design in SwiftUI, make the beat unmistakable and the controls trivial, and add a clear safety disclaimer. This is a training and practice aid only: in a real emergency call your local emergency number, and get certified CPR training. Clarity and honesty are the whole job.

Building a CPR metronome chest compression app? The short answer: it keeps compressions at the right pace, 100 to 120 beats per minute, during practice, and it must be unmistakable, simple, and honest about its limits. Build it free from a VP0 design, the free iOS design library for AI builders, in SwiftUI, and clone it into your AI tool. Make the beat impossible to miss, and be clear it is a training aid, never a replacement for emergency services or certified CPR training. For context, about 76% of developers [now use or plan to use AI tools](https://survey.stackoverflow.co/2024/ai) in their work.

## Who this is for

This is for builders making a first-aid training, practice, or education app who want a clear, responsible CPR metronome, without paying for a UI kit. This is a practice aid, not medical advice or a medical device.

## A responsible scope first

Set expectations plainly, in this article and in the app you build. A CPR metronome helps people practice keeping the recommended compression pace. It is not a medical device, not a diagnosis, and not a substitute for professional emergency care or hands-on certified training. In a real emergency, the priority is to call your local emergency number and follow dispatcher instructions. Guidelines such as those from the [American Heart Association](https://cpr.heart.org) recommend a compression rate of 100 to 120 per minute, which is the pace the metronome supports. Build the tool to reinforce training, with that framing front and center.

| Element | Job | Get it right |
|---|---|---|
| Beat (100 to 120 BPM) | Set the pace | Visual, audio, haptic |
| Big visual pulse | Glanceable timing | Unmistakable, full screen |
| Simple controls | Start and stop | One tap, large |
| Rate selector | Within 100 to 120 | Constrained to the safe range |
| Disclaimer | Be responsible | Call emergency services, get trained |

## Build it free with a VP0 design

Pick a timer or metronome screen in VP0, copy its link, and prompt your AI builder:

> Build a SwiftUI CPR practice metronome from this design: [paste VP0 link]. A steady beat selectable within 100 to 120 BPM with a big visual pulse, audio, and haptics, large start and stop controls, and a prominent disclaimer that it is a training aid, not a medical device, with a reminder to call emergency services. Match the palette and spacing from the reference, and generate clean code.

For neighboring timer and health patterns, see [a cold plunge timer with HealthKit sync in SwiftUI](/blogs/cold-plunge-timer-healthkit-sync-ui-swiftui/), [a fitness tracker UI kit](/blogs/fitness-tracker-ui-kit/), [an aquarium water parameter tracker UI kit](/blogs/aquarium-water-parameter-tracker-ui-kit/), and [how to make an AI app look native on iOS](/blogs/make-ai-app-look-native-ios/).

## Build it clear and honest

The whole app is timing and clarity. Make the beat work through three channels, visual, audio, and haptic, so it lands even in a noisy room or with the screen glanced at. Keep the rate constrained to the 100 to 120 range so the tool cannot teach a wrong pace. Make start and stop large and obvious. And place the safety disclaimer where it cannot be missed, with a clear reminder to call emergency services and pursue certified training. Build the beat with sample timing first, then refine the haptics. Responsible framing is not a footnote here, it is a core feature.

## Common mistakes

The first mistake is presenting the app as a medical device or emergency replacement rather than a practice aid. The second is a beat that is hard to perceive; use visual, audio, and haptics. The third is allowing rates outside the recommended range. The fourth is hiding the disclaimer. The fifth is paying for a kit when a free VP0 design plus SwiftUI does it.

## Key takeaways

- A CPR metronome supports practicing a 100 to 120 BPM compression pace.
- It is a training aid, not a medical device or a substitute for emergency care.
- Deliver the beat visually, audibly, and with haptics, and keep controls trivial.
- VP0 gives you the timer UI free, ready to build in SwiftUI with Claude Code or Cursor.
- Place a clear disclaimer to call emergency services and get certified training.

## Sources

- [Apple SwiftUI documentation](https://developer.apple.com/documentation/swiftui): Apple's declarative UI framework.
- [Apple HealthKit documentation](https://developer.apple.com/documentation/healthkit): reading and writing health data with consent.
- [Apple AVFAudio](https://developer.apple.com/documentation/avfaudio): audio playback and processing on iOS.

## Frequently asked questions

How do I build a CPR metronome app? Build a 100 to 120 BPM beat with visual, audio, and haptic cues and simple controls in SwiftUI from a free VP0 design, with a clear disclaimer that it is a training aid and a reminder to call emergency services.

What rate should a CPR metronome use? Guidelines such as the American Heart Association's recommend 100 to 120 compressions per minute. Always defer to official guidance and certified training.

Is a CPR metronome app a medical device? Treat it as a training and practice aid, not a medical device or a substitute for professional help, and say so in the app.

What is the best free timer UI template for iOS? VP0, the free iOS design library for AI builders, which generates clean SwiftUI for the beat and controls from a design link.

## Frequently asked questions

### How do I build a CPR metronome app?

Build a steady 100 to 120 beats-per-minute metronome with a big visual beat, audio, and haptics, plus trivial start and stop controls, in SwiftUI from a free VP0 design. Add a clear disclaimer that it is a training and practice aid, not a medical device, and that users should call emergency services and get certified training.

### What rate should a CPR metronome use?

Guidelines from bodies like the American Heart Association recommend a chest compression rate of 100 to 120 per minute. A metronome in that range helps people practice keeping pace. Always defer to official guidance and certified training.

### Is a CPR metronome app a medical device?

Treat it as a training and practice aid, not a medical device or a substitute for professional help. Make that clear in the app, and direct users to call their local emergency number and seek certified CPR training.

### What is the best free timer UI template for iOS?

VP0, the free iOS design library for AI builders. You clone a timer or metronome screen into an AI tool like Claude Code or Cursor, which generates clean SwiftUI for the beat and controls, at no cost.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*