SwiftClockUI - make custom clock use of swiftUI

Animation SwiftUI Views

SwiftClockUI – make custom clock use of swiftUI

July 9, 2025

Clock UI for SwiftUI

This library has been tested

✅💻 macOS Catalina 10.15.3
✅💻 macOS Big Sur 11.6
✅📱 iOS 13
✅📱 iOS 14
✅📱 iOS 15

For compatibility with Xcode version older than 13.3, I would recommend to checkout the 1.4.x tag, it should compile with Xcode 11 and greater

Bind a date


                                              
                                                struct ContentView: View {

@State private var date = Date()
var body: some View {

ClockView().environment(\.clockDate, $date)

}

}

Simply set .environment(\.clockDate, $date) $date has to be a binding. If you want something constant (just for showing the time), you could pass .constant(yourDate)

Arms move when date are set (take hour and minute in account)
Move the Arms change the date (hour and minute depending on which arm you’ve moved)

Change Clock style

There is 4 different clock style:

Style	Picture
Classic
Art Nouveau

Drawing
Steampunk

To set the style: .environment(\.clockStyle, .steampunk) for Steampunk style for instance.


                                              
                                                struct ContentView: View {

@State private var clockStyle: ClockStyle = .classic
var body: some View {

ClockView().environment(\.clockStyle, clockStyle)

}

}

\.clockStyle is typed as enum ClockStyle which is Identifiable, CaseIterable, and has a convenient method to get the description (in English): public var description: String

It’s very useful when you want to iterate over this enum to let the user choose the clock style, for instance you can easily do something like this:


                                              
                                                struct StylePicker: View {

@Binding var clockStyle: ClockStyle
var body: some View {

Picker(“Style”, selection: clockStyle) {

ForEach(ClockStyle.allCases) { style in

Text(style.description).tag(style)

}

}

.pickerStyle(SegmentedPickerStyle())

}

}

Change elements color

You can also change the color of Clock elements. Again with changing some `.environment` keys.


                                              
                                                ClockView()

.environment(\.clockArmColors, ClockArmColors(

minute: .red,

hour: .blue

))

.environment(\.clockBorderColor, .orange)

.environment(\.clockIndicatorsColor, .green)

In light mode, you could expect a result like this:

Installation

Xcode

You can add SwiftToTen to an Xcode project by adding it as a package dependency.

From the File menu, select Swift Packages › Add Package Dependency…
Enter “https://github.com/renaudjenny/SwiftClockUI” into the package repository URL test field

As package dependency

Edit your Package.swift to add this library.


                                              
                                                let package = Package(

…

dependencies: [

.package(url: “https://github.com/renaudjenny/SwiftClockUI”, from: “2.0.0”),

…

],

targets: [

.target(

name: “<Your project name>”,

dependencies: [“SwiftClockUI”]),

…

]

)

GitHub

View Github

#clock #customclock #swiftui

YOU MIGHT ALSO LIKE...

July 26, 2025
SwiftUI

🧭 NavigationKit

NavigationKit is a lightweight library which makes SwiftUI navigation super easy to use. 💻 Installation 📦 Swift Package Manager Using Swift Package Manager, add ...

July 26, 2025
SwiftUI

swiftui-navigation-stack

An alternative SwiftUI NavigationView implementing classic stack-based navigation giving also some more control on animations and programmatic navigation. NavigationStack Installation ...

July 26, 2025
SwiftUI

Stinsen

Simple, powerful and elegant implementation of the Coordinator pattern in SwiftUI. Stinsen is written using 100% SwiftUI which makes it ...

July 25, 2025
SwiftUI

SwiftUI Router

With SwiftUI Router you can power your SwiftUI app with path-based routing. By utilizing a path-based system, navigation in your app becomes ...

July 25, 2025
SwiftUI
Uncategorized

FlowStacks

This package takes SwiftUI's familiar and powerful NavigationStack API and gives it superpowers, allowing you to use the same API not just ...