SwiftClockKit - Beautifully Designed, Code-Rendered Clock Faces for Your SwiftUI

SwiftUI Views

SwiftClockKit – Beautifully Designed, Code-Rendered Clock Faces for Your SwiftUI

July 9, 2025

SwiftClockKit provides elegant, customizable clock views for SwiftUI projects—drawn entirely with code, no images! Each clock face features meticulously designed details with realistic skeuomorphic effects, all achieved purely through SwiftUI.

✨ Features

🌟 Beautifully Designed Styles: Each clock style is crafted with attention to detail. All effects—shadows, highlights, and textures—are rendered in real-time using only SwiftUI.
🎨 Simple Customization: * Multiple design styles (starting with .braun) * Works seamlessly with system themes (light/dark) * Toggle visual details like reflections
⏱️ Flexible Time Display: Show the current system time or initialize with any specific time (great for different timezones or events)
📱 Cross-Platform: Works on iOS, macOS, and watchOS
💻 Pure SwiftUI: No images or external dependencies—just clean SwiftUI code

🚀 Quick Start

Add a live clock to your app in seconds:


                                              
                                                import SwiftUI

import SwiftClockKit
struct ContentView: View {

var body: some View {

ClockView() // That’s it! Live system time with the default .braun style

.frame(width: 250, height: 250)

}

}

🚀 Running the Demo Application

To see SwiftClockKit in action and experiment with its features, you can run the included demo application. The demo showcases the ClockView and allows you to interactively change its appearance and time settings.

Steps to run the demo:

In your local copy of the repository, navigate to the folder SwiftClockKitDemo. It contains the demo application.
Inside this folder, locate and open the Xcode project file (e.g., SwiftClockKitDemo.xcodeproj) in Xcode.
Click the “Run” button (or press Command+R).

📦 Installation

Swift Package Manager

Add SwiftClockKit to your project in Xcode:

Select File > Add Packages…
Enter the repository URL: https://github.com/ibvildthings/SwiftClockKit.git
Choose the latest version and click Add Package

Or add it to your Package.swift:


                                              
                                                dependencies: [

.package(url: “https://github.com/ibvildthings/SwiftClockKit.git”, from: “1.0.0”)

]

🖼️ Examples

Default Clock with System Appearance

The simplest implementation shows the current time and automatically adapts to light/dark mode:


                                              
                                                ClockView() // Defaults to .braun style, .system appearance, with reflections

.frame(width: 250, height: 250)

Light & Dark Mode Examples

Explicitly set the appearance for your clock:


                                              
                                                HStack(spacing: 20) {

ClockView(appearance: .light)

.frame(width: 150, height: 150)
ClockView(appearance: .dark)

.frame(width: 150, height: 150)

.background(Color.black.opacity(0.8))

.cornerRadius(10)

}

Showing a Different Timezone

Display the time for a specific location:


                                              
                                                struct LondonClockView: View {

@State private var londonTime: Date = {

// Get current time in London

var calendar = Calendar.current

calendar.timeZone = TimeZone(identifier: “Europe/London”) ?? .current

let londonComponents = calendar.dateComponents(

[.year, .month, .day, .hour, .minute, .second],

from: Date()

)

return Calendar.current.date(from: londonComponents) ?? Date()

}()
var body: some View {

VStack {

Text(“London Time”).font(.headline)
ClockView(date: $londonTime)

.frame(width: 200, height: 200)

}

}

}

⚙️ Customization Options

Available Parameters

ClockView can be customized with these parameters:


                                              
                                                ClockView(

style: ClockStyle = .braun,   // Visual style of the clock

date: Binding<Date>? = nil,       // Optional starting time (defaults to current system time)

appearance: AppearanceScheme = .system,  // Light, dark, or system-based

showReflections: Bool = true      // Toggle reflection effects

)