SwiftUI Developer Templates & Architecture
ContentUnavailableView empty states, centralized app styling constants, and microcopy architectures. (3 components available in Compot).
2 of 3Free ComponentiOS 16.0+
App Styles Template
Architecture guide and code structure for centralized color palettes, padding constants, and corner radiuses.
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.
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()
}Explore other SwiftUI categories
Buttons (34)Texts & Typography (18)Banners & Promos (10)Cards & Content Displays (8)Settings, Lists & Rows (9)Avatars & User Profiles (7)Charts & Gauges (5)Icons & Badges (7)Links & Sharing (5)Navigation Links & Banners (3)Onboarding & Welcome Screens (3)Paywalls & Subscriptions (3)Images & Effects (3)Labels (4)SF Symbols & Animations (4)Inputs & Text Editors (2)Shapes, Chat & Real-Time (2)Tiles & Selectables (2)Badges & Pills (1)Alerts & Modals (1)Toasts & Feedback (1)