GaugeKit is a free-to-use, open source Swift Package I created while I was working on Cryptoverview. 👷🏼‍♂️ It allows for easy creation of gauges not unlike the circular graphics used in many complications on the Apple Watch. ⌚️

What's New

GaugeKit 0.5


watchOS support is here!


GaugeKit is a free-to-use, lightweight Swift package which enables easy, effortless creation of a gauge-like view ideal for visualizing a value in a gauge, not too different from the native gauges used by Apple for some Apple Watch complications.

Importing GaugeKit

To use GaugeKit in your project, simply add a Swift Package to your project using the URL to this repository, or add it to your Package.swift manifest manually.

let package = Package(
	dependencies: [
		.package(url: "", from: "0.1.0")


GaugeKit is built with SwiftUI, and thus the minimum requirement to use it is that your project (or the views you're creating with it) has a deployment target set to iOS 13 / macOS 11 / watchOS 6 or later.

To use it in a UIKit project, use a UIHostingController.
To use it in an AppKit project, use a NSHostingController or NSHostingView.


To create a basic Gauge is as simple as providing it with a title, an integer value, and the colors that you want the gauge display along itself. For example:

GaugeView(title: "Speed", value: 88, colors: [.red, .orange, .yellow, .green])

alt text

A basic gauge like this will default to 100 for its max value. You can also explicitely set the max value of the gauge to a custom value. The following initialization will create a gauge that maxes out at 1000 instead of 100.

GaugeView(title: "Speed", value: 100, maxValue: 1000, colors: [.red, .orange, .yellow, .green])

Additionally, as space for additional information is quite limited within the gauge, you can initialize a gauge with some additional information using three different (optional) strings. This information will be revealed to the user with a quick flip animation when a tap on the gauge view is recorded.

let description = "This is a semi-clever reference."
let secondaryTitle = "#BTTF"
let body = "This is how fast you need to go to trigger the flux capacitor."
let additionalInfo = GaugeAdditionalInfo(secondaryTitle: secondaryTitle, description: description, body: body)

GaugeView(title: "Speed", value: 88, colors: [.red, .orange, .yellow, .green], additionalInfo: additionalInfo)

If you leave any of the strings as nil, the Text instance responsible for displaying that string will not be rendered. So if you just want to create a gauge with a short description and no secondary title or body, this is also a valid init:

let description = "This is a description."
let additionalInfo = GaugeAdditionalInfo(secondaryTitle: nil, description: description, body: nil)

GaugeView(title: "Speed", value: 88, colors: [.red, .orange, .yellow, .green], additionalInfo: additionalInfo)

Finally, if you're feeling like you don't need any built in text elements, you could create a gauge without a title or value (or any additional info), like this:

GaugeView(colors: [.red, .orange, .yellow, .green])


While I don't have many concrete plans for GaugeKit at the moment, I do plan to fiddle around with it and improve it best I can from time to time. If you have any feature requests or ideas you think I should take into consideration, please feel free to contact me here on GitHub.


  • Swift Tools 5.3.0
View More Packages from this Author


  • None
Last updated: Tue Nov 08 2022 21:50:02 GMT-0500 (GMT-05:00)