Autumn Sale50% offCOMPOT

SwiftUI Developer Templates & Architecture

ContentUnavailableView empty states, centralized app styling constants, and microcopy architectures. (3 components available in Compot).

1 of 3Free ComponentiOS 16.0+

Content Unavailable View Template

Standard empty state template with icon, title, description, and action button.

View Component & Details
ContentUnavailableViewTemplate.swift
import SwiftUI

struct ContentUnavailableViewTemplate: View {
    @State private var toggleButton = false

    var body: some View {
        ContentUnavailableView {
            VStack(spacing: 16) {
                Image(systemName: "folder.badge.plus")
                .font(.title)
                Text("No items")
            }
        } description: {
            Text("This folder is empty. Start building your library by adding a new item.")
            .multilineTextAlignment(.center)
            .frame(maxWidth: 450)
        } actions: {
            Button(
                "Add New",
                systemImage: "plus",
                action: { toggleButton.toggle() }
            )
            .symbolEffect(.bounce, value: toggleButton)
            .buttonRepeatBehavior(.enabled)
        }
    }
}

#Preview {
    ContentUnavailableViewTemplate()
}
2 of 3Free ComponentiOS 16.0+

App Styles Template

Architecture guide and code structure for centralized color palettes, padding constants, and corner radiuses.

View Component & Details
AppStylesTemplate.swift
import SwiftUI

struct AppStyles {

    struct SFSymbols {
        static let copySuccess: String = "checkmark.circle.fill"
        static let copy: String = "doc.on.doc"
        static let remove: String = "trash"
        static let share: String = "square.and.arrow.up"
        static let lightMode: String = "sun.max.fill"
        static let darkMode: String = "moon"
        static let notFavorite: String = "heart"
        static let isFavorite: String = "heart.fill"
        static let save: String = "bookmark"
        static let edit: String = "pencil"
        static let contextMenu: String = "contextualmenu.and.cursorarrow"
        static let optionMenu: String = "ellipsis.circle"
        static let summary: String = "doc.text.image"
        static let discover: String = "globe"
        static let reminder: String = "bell"
        static let calendar: String = "calendar"
        static let note: String = "note.text"
        static let add: String = "plus"
        static let complete: String = "checkmark"
        static let settings: String = "gear"
        static let sort: String = "line.3.horizontal.decrease"
        static let preference: String = "slider.horizontal.3"
        static let notification: String = "bell.circle.fill"
        static let alert: String = "bell.circle.fill"
        static let time: String = "clock"
        static let delete: String = "trash"
        static let pause: String = "pause"
        static let check: String = "checkmark"
        static let cancel: String = "xmark"
        static let app: String = "apps.iphone"
        static let blog: String = "doc.text.image"
        static let book: String = "books.vertical"
        static let community: String = "person.2"
        static let course: String = "graduationcap"
        static let event: String = "hand.wave"
        static let design: String = "scribble.variable"
        static let github: String = "apple.terminal"
        static let newsletter: String = "newspaper"
        static let podcast: String = "waveform.badge.mic"
        static let tool: String = "pencil.and.ruler"
        static let youtube: String = "play.rectangle"
        static let base: String = "baseball.diamond.bases"
        // Add more
    }
    
    // Following gray styles are based on RadixUI: https://www.radix-ui.com/colors
    struct Colors {
        static let gray1: Color = Color(hex: "#111111")
        static let gray2: Color = Color(hex: "#191919")
        static let gray3: Color = Color(hex: "#222222")
        static let gray4: Color = Color(hex: "#2A2A2A")
        static let gray5: Color = Color(hex: "#313131")
        static let gray6: Color = Color(hex: "#3A3A3A")
        static let gray7: Color = Color(hex: "#484848")
        static let gray8: Color = Color(hex: "#606060")
        static let gray9: Color = Color(hex: "#6E6E6E")
        static let gray10: Color = Color(hex: "#7B7B7B")
        static let gray11: Color = Color(hex: "#B4B4B4")
        static let gray12: Color = Color(hex: "#EEEEEE")
        
        static let superRed: Color = Color(hex: "D22C1F")
        static let superBlue: Color = Color(hex: "38A7F5")
        // Add more
    }
    
    struct Typography {
        static let title2XL: CGFloat = 34
        static let titleXL: CGFloat = 28
        static let titleLG: CGFloat = 22
        static let titleMD: CGFloat = 20
        static let headlineMD: CGFloat = 17
        static let subheadlineMD: CGFloat = 15
        static let bodyMD: CGFloat = 17
        static let bodySM: CGFloat = 15
        static let bodyXS: CGFloat = 13
        static let body2XS: CGFloat = 11
        static let calloutMD: CGFloat = 16
        static let calloutSM: CGFloat = 15
        static let captionMD: CGFloat = 12
        static let captionSM: CGFloat = 11
        static let footnoteMD: CGFloat = 13
        // Add more
    }

    struct Padding {
        static let xs: CGFloat = 4
        static let sm: CGFloat = 8
        static let md: CGFloat = 16
        static let lg: CGFloat = 24
        static let xl: CGFloat = 32
        // Add more
    }
    
    struct Spacing {
        static let xl: CGFloat = 32
        static let lg: CGFloat = 24
        static let md: CGFloat = 16
        static let sm: CGFloat = 8
        static let xs: CGFloat = 4
        // Add more
    }
    
    struct Shapes {
        static let cornerRadiusXL: CGFloat = 24
        static let cornerRadiusLG: CGFloat = 16
        static let cornerRadiusMD: CGFloat = 12
        static let cornerRadiusSM: CGFloat = 8
        static let cornerRadiusXS: CGFloat = 4
        static let icon2XL: CGFloat = 64
        static let iconXL: CGFloat = 32
        static let iconLG: CGFloat = 24
        static let iconMD: CGFloat = 16
        static let iconSM: CGFloat = 8
        // Add more
    }

    // Add more styles based on your app's needs
}



// To use hex code for Color, implement following extension:

extension Color {
    init(hex: String) {
        let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
        var int: UInt64 = 0
        Scanner(string: hex).scanHexInt64(&int)
        let a, r, g, b: UInt64
        switch hex.count {
        case 3: // RGB (12-bit)
            (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
        case 6: // RGB (24-bit)
            (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
        case 8: // ARGB (32-bit)
            (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
        default:
            (a, r, g, b) = (255, 0, 0, 0)
        }

        self.init(.sRGB, red: Double(r) / 255, green: Double(g) / 255, blue:  Double(b) / 255, opacity: Double(a) / 255)
    }
}

struct UseAppStyles: View {
    
    var body: some View {
        VStack(alignment: .center, spacing: AppStyles.Spacing.sm) {
            Image(systemName: AppStyles.SFSymbols.base)
                .font(.system(size: AppStyles.Typography.titleXL))
            //.foregroundStyle(AppStyles.Colors.)
                .frame(width: AppStyles.Shapes.icon2XL, height: AppStyles.Shapes.icon2XL, alignment: .center)
                .background {
                    RoundedRectangle(cornerRadius: AppStyles.Shapes.cornerRadiusLG, style: .continuous)
                        .fill(AppStyles.Colors.superBlue.gradient)
                }
            Text("Constants are forever!")
                .font(.system(size: AppStyles.Typography.bodySM))
        }
        
    }
}

#Preview {
    UseAppStyles()
}
3 of 3Free ComponentiOS 16.0+

App Microcopy Template

Structured template for organizing all user-facing copy into strongly-typed constants.

View Component & Details
AppMicrocopyTemplate.swift
import SwiftUI

// Use Microcopy constants like this: Text(AppMicrocopy.Marketing.oneStep)
// Some terms come from https://copybook.me/

struct AppMicrocopy {
    
    struct Onboarding {
        static let welcomeTitle: LocalizedStringResource = "Welcome to [app name]"
        static let welcomeSubtitle: LocalizedStringResource = "The best way to [app purpose]."
        static let welcomeButtonLabel: LocalizedStringResource = "Get Started"
        // Add more
    }
    
    struct Marketing {
        static let oneStep: LocalizedStringResource = "You're one step away from your dream"
        static let exploreFeatures: LocalizedStringResource = "Explore all features"
        static let unlimitedItems: LocalizedStringResource = "Save unlimited number of items"
        static let becomePro: LocalizedStringResource = "Become Pro with the Premium Subscription"
        static let usedby: LocalizedStringResource = "Used by thousands of happy users around the world"
        static let trsutedBy: LocalizedStringResource = "Trusted by smart developers around the world"
        // Add more
    }
    
    struct Paywall {
        static let planOptions: LocalizedStringResource = "Upgrade, downgrade, or cancel anytime."
        static let comparePlans: LocalizedStringResource = "See all features and compare plans"
        static let popularPlan: LocalizedStringResource = "Our most popular plan"
        static let saveAnnualPlan: LocalizedStringResource = "Save with our Annual Plan"
        static let morePlans: LocalizedStringResource = "More options"
        // Add more
    }
    
    struct Profile {
        static let nameLabel: LocalizedStringResource = "Name"
        static let namePrompt: LocalizedStringResource = "Enter your name"
        static let email: LocalizedStringResource = "Email"
        static let emailPrompt: LocalizedStringResource = "Enter your email"
        static let pickPhoto: LocalizedStringResource = "Pick a profile photo"
        // Add more
    }
    
    struct Navigation {
        static let home: LocalizedStringResource = "Home"
        static let profile: LocalizedStringResource = "Profile"
        static let summary: LocalizedStringResource = "Summary"
        static let settings: LocalizedStringResource = "Settings"
        static let help: LocalizedStringResource = "Help"
        static let more: LocalizedStringResource = "Show More"
        static let seeAll: LocalizedStringResource =  "See All"
        static let favorites: LocalizedStringResource = "Favorites"
        static let saved: LocalizedStringResource = "Saved"
        // Add more
    }
    
    struct Controls {
        static let save: LocalizedStringResource = "Save"
        static let done: LocalizedStringResource = "Done"
        static let cancel: LocalizedStringResource = "Cancel"
        static let cont: LocalizedStringResource = "Continue"
        static let move: LocalizedStringResource = "Move"
        static let open: LocalizedStringResource = "Open"
        static let close: LocalizedStringResource = "Close"
        static let archive: LocalizedStringResource = "Archive"
        static let forward: LocalizedStringResource = "Forward"
        static let reply: LocalizedStringResource = "Reply"
        static let download: LocalizedStringResource = "Download"
        static let upload: LocalizedStringResource = "Upload"
        static let play: LocalizedStringResource = "Play"
        static let stop: LocalizedStringResource = "Stop"
        static let pause: LocalizedStringResource = "Pause"
        static let next: LocalizedStringResource = "Next"
        static let previous: LocalizedStringResource = "Previous"
        static let skip: LocalizedStringResource = "Skip"
        static let shuffle: LocalizedStringResource = "Shuffle"
        // Add more
    }
    
    struct CTA {
        static let tryFree: LocalizedStringResource = "Try it for Free!"
        static let startTrial: LocalizedStringResource = "Start My Free Trial"
        static let buy: LocalizedStringResource = "Buy Now"
        static let getStarted: LocalizedStringResource = "Let’s get started!"
        // Add more
    }
    
    struct Toast {
        static let successLabel: LocalizedStringResource = "Success"
        static let saveSuccessMsg: LocalizedStringResource = "Item has been saved"
        static let changeSuccessMsg: LocalizedStringResource = "Your changes have been saved"
        static let profileUpdateSuccessMsg: LocalizedStringResource = "Profile updated successfully"
        static let failLabel: LocalizedStringResource = "Failure"
        static let genericFailMsg: LocalizedStringResource = "Something went wrong, please try again"
        static let renewSuccess: LocalizedStringResource = "Your subscription has been successfully renewed."
        // Add more
    }
    
    struct EmptyState {
        static let nothing: LocalizedStringResource = "Nothing. Nada. Zero. Try something else darling."
        static let noStar: LocalizedStringResource = "You haven’t starred anything yet!"
        static let noItem: LocalizedStringResource = "You don’t have any items yet. When you create one, it will show up here."
        static let noFavorite: LocalizedStringResource = "You don’t have any favourite items yet. When you favourite one, it will show up here."
        static let noBookmark: LocalizedStringResource = "You don’t have any bookmarked items yet. When you bookmark one, it will show up here."
        static let nothingFound: LocalizedStringResource = "Uh-oh. We couldn’t find what you were looking for. Sorry."
        static let nothingYet: LocalizedStringResource = "Nothing yet, check back soon!"
        static let emptyList: LocalizedStringResource = "There is nothing in this list yet. When new items are pubished, they will appear here."
        static let noNew: LocalizedStringResource = "Nothing new here. Looks like you’re all caught up!"
        // Add more
    }
    
    struct Error {
        static let generic: LocalizedStringResource = "Something went wrong! Please try again"
        static let unexpected: LocalizedStringResource = "An unexpected error occurred. Try again."
        static let noAccess: LocalizedStringResource = "You do not have permission to access this feature."
        static let noAccount: LocalizedStringResource = "No account exists matching that email address."
        static let processing: LocalizedStringResource = "There was an error processing your request."
        static let tryAgain: LocalizedStringResource = "Please try again and contact us if the issue persists."
        static let fatal: LocalizedStringResource = "A fatal error has occurred"
        // Add more
    }
    
    struct Warning {
        static let generic: LocalizedStringResource = "This action cannot be undone. Are you sure you want to proceed?"
        static let delete: LocalizedStringResource = "This will really delete all your data, including all your progress and account information."
        static let changes: LocalizedStringResource = "Please be careful. Changes made here will be permanent."
        static let weakConnection: LocalizedStringResource = "Uh-oh. We sense a weak internet connection."
        static let offline: LocalizedStringResource = "You appear to be offline, this might be the problem."
        // Add more
    }
    
    struct Settings {
        static let chooseLanguage: LocalizedStringResource = "Choose the language you’d like to use."
        static let chooseCurrency: LocalizedStringResource = "Choose the default currency you’d like to use."
        static let chooseNotificationTime: LocalizedStringResource = "Choose when to be notified"
        static let getFeedback: LocalizedStringResource = "If there’s something we could do better, please let us know. We’ll do our best to make you happy."
        static let rateApp: LocalizedStringResource = "Rate us on the App Store"
        static let reviewApp: LocalizedStringResource = "Leave us a review on the App Store"
        static let contactUs: LocalizedStringResource = "If you have any questions or comments, please feel free to contact us."
        static let helpOffer: LocalizedStringResource = "Have questions? We’re here to help."
        // Add more
    }
    
}

#Preview {
    AppMicrocopyTemplate()
}