# Compot — Full SwiftUI Components & Code Catalog > Complete, machine-readable index of all 135 pure vanilla SwiftUI components, layouts, and templates for iOS, macOS, watchOS, and visionOS developers. Zero external dependencies. - **Website**: https://www.compotui.com - **App Store**: https://apps.apple.com/app/id6471916279 - **Summary LLM Index**: https://www.compotui.com/llms.txt - **Sitemap**: https://www.compotui.com/sitemap.xml --- ## 1. Primary Button Basic - **URL**: https://www.compotui.com/components/buttons/primary-button-basic - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `primaryButtonDefault` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: onboarding - **Keywords**: button, primary, prominent, buton, buttons, btn, free ### Description & Overview `Primary Button Basic` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions ### SwiftUI Code ```swift Button("Primary Action") { // Action for the button print("Button tapped") } .buttonStyle(.borderedProminent) .help("Accessibility hint") ``` --- ## 2. CTA Button Large Basic - **URL**: https://www.compotui.com/components/buttons/cta-button-large-basic - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `CTAButtonLarge` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: onboarding - **Keywords**: button, onboarding, welcome screen, buton, buttons, btn, free ### Description & Overview `CTA Button Large Basic` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions ### SwiftUI Code ```swift Button { // Action for the button print("Button tapped") } label: { HStack(spacing: 8) { Text("Get Started") Image(systemName: "arrow.right") } .padding() .font(.headline) .foregroundStyle(.white) .frame(alignment: .center) } .frame(maxWidth: 450) .padding(.horizontal, 32) .background(Color.accentColor) .clipShape(Capsule()) .padding() .help("Accessibility hint") ``` --- ## 3. Secondary Button Basic - **URL**: https://www.compotui.com/components/buttons/secondary-button-basic - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `secondaryButtonDefault` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: onboarding - **Keywords**: button, secondary, buton, btn, free ### Description & Overview `Secondary Button Basic` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions ### SwiftUI Code ```swift Button { // Action for the button print("Button tapped") } label: { Text("Secondary Action") } .font(.headline) .padding(.vertical, 10) .padding(.horizontal, 15) .overlay( RoundedRectangle(cornerRadius: 12) .stroke(lineWidth: 1) ) .foregroundStyle(Color.accentColor) ``` --- ## 4. Tertiary Button Basic - **URL**: https://www.compotui.com/components/buttons/tertiary-button-basic - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `tertiaryButtonDefault` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: onboarding - **Keywords**: button, default, btn, buton, free ### Description & Overview `Tertiary Button Basic` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions ### SwiftUI Code ```swift Button("Tap Me") { // Action for the button print("Button tapped") } .buttonStyle(.bordered) .help("Accessibility hint") ``` --- ## 5. Icon Button Tertiary Basic - **URL**: https://www.compotui.com/components/buttons/icon-button-tertiary-basic - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `iconButtonDefault` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: onboarding - **Keywords**: button, icon, symbol, plus, add, default, buttons, buton, btn, free ### Description & Overview `Icon Button Tertiary Basic` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions ### SwiftUI Code ```swift Button { // Action } label: { Image(systemName: "plus") .font(.title3) .padding(16) .background(.thinMaterial) .clipShape(Circle()) } .foregroundStyle(Color.accentColor) .shadow(color: .gray.opacity(0.3), radius: 2) .padding() .help("Accessibility hint") ``` --- ## 6. Bouncy Button Icon - **URL**: https://www.compotui.com/components/buttons/bouncy-button-icon - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `bouncyButtonIcon` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: onboarding, dashboard - **Keywords**: button, symbol, icon ### Description & Overview `Bouncy Button Icon` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift // @State private var bounceButton = false Button( "Bouncy Button", systemImage: "heart.fill", action: { bounceButton.toggle() } ) .font(.title3) .symbolEffect(.bounce, value: bounceButton) .tint(Color.red) .onAppear { bounceButton.toggle() } ``` --- ## 7. Button with Repeat Behavior - **URL**: https://www.compotui.com/components/buttons/button-with-repeat-behavior - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `buttonWDecrementIncrement` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: onboarding, dashboard, account - **Keywords**: button, symbol, icon ### Description & Overview `Button repeat behaviour enabled` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift // Create state values // @State private var toggleButton = false // @State private var count = 0 VStack { Text("\\(count)") .font(.title) HStack(spacing: 24) { VStack { Button { count = count - 1 } label: { Image(systemName: "minus") .frame(width: 48, height: 48) .background(.background.secondary) .clipShape(Circle()) } .symbolEffect(.bounce, value: toggleButton) .buttonRepeatBehavior(.enabled) Text("Hold to continuously \\ndecrease the number") .font(.footnote) .foregroundStyle(.secondary) .multilineTextAlignment(.center) .frame(maxWidth: 180, alignment: .center) } VStack { Button { count = count + 1 } label: { Image(systemName: "plus") .frame(width: 48, height: 48) .background(.background.secondary) .clipShape(Circle()) } .symbolEffect(.bounce, value: toggleButton) .buttonRepeatBehavior(.enabled) Text("Hold to continuously \\nincrease the number") .font(.footnote) .foregroundStyle(.secondary) .multilineTextAlignment(.center) .frame(maxWidth: 180, alignment: .center) } } } ``` --- ## 8. Button for Copying - **URL**: https://www.compotui.com/components/buttons/button-for-copying - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `buttonWCopied` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: dashboard, settings ### Description & Overview `Button for copying` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - App settings, preferences, and account configuration screens - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI struct ButtonWCopied: View { @State private var isCopied: Bool = false var body: some View { Button { // Assign the content you want to let the user copy to copiedString let copiedString = "Compot is the Best!" UIPasteboard.general.string = copiedString withAnimation { isCopied = true } DispatchQueue.main.asyncAfter(deadline: .now() + 2) { withAnimation { isCopied = false } } } label: { HStack(spacing: 4) { Text(isCopied ? "Copied" : "Copy") Image(systemName: isCopied ? "checkmark.circle.fill" : "doc.on.doc") } .font(.system(size: 17, weight: .regular)) .foregroundStyle(isCopied ? Color.green : Color.accentColor) .frame(alignment: .center) } .disabled(isCopied) } } #Preview { ButtonWCopied() } ``` --- ## 9. Bordered Green Rounded Button (Regular) - **URL**: https://www.compotui.com/components/buttons/bordered-green-rounded-button-regular - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `buttonWButtonStyleBorderedRegularRoundedRectangleGreen` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, onboarding, paywall ### Description & Overview `Button Bordered Rounded Rectangle Green Regular` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift // Implement action for the button in your struct // private func buttonAction() {} Button("Tap me", action: buttonAction) .buttonStyle(.bordered) .controlSize(.regular) .buttonBorderShape(.roundedRectangle) .tint(.green) ``` --- ## 10. Bordered Green Rounded Button (Mini) - **URL**: https://www.compotui.com/components/buttons/bordered-green-rounded-button-mini - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `buttonWButtonStyleBorderedMiniRoundedRectangleGreen` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, onboarding, paywall ### Description & Overview `Button Bordered Rounded Rectangle Green Mini` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift // Implement action for the button in your struct // private func buttonAction() {} Button("Tap me", action: buttonAction) .buttonStyle(.bordered) .controlSize(.mini) .buttonBorderShape(.roundedRectangle) .tint(.green) ``` --- ## 11. Bordered Green Rounded Button (Small) - **URL**: https://www.compotui.com/components/buttons/bordered-green-rounded-button-small - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `buttonWButtonStyleBorderedSmallRoundedRectangleGreen` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, onboarding, paywall ### Description & Overview `Button Bordered Rounded Rectangle Green Small` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift // Implement action for the button in your struct // private func buttonAction() {} Button("Tap me", action: buttonAction) .buttonStyle(.bordered) .controlSize(.small) .buttonBorderShape(.roundedRectangle) .tint(.green) ``` --- ## 12. Bordered Green Rounded Button (Large) - **URL**: https://www.compotui.com/components/buttons/bordered-green-rounded-button-large - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `buttonWButtonStyleBorderedLargeRoundedRectangleGreen` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, onboarding, paywall ### Description & Overview `Button Bordered Rounded Rectangle Green Large` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift // Implement action for the button in your struct // private func buttonAction() {} Button("Tap me", action: buttonAction) .buttonStyle(.bordered) .controlSize(.large) .buttonBorderShape(.roundedRectangle) .tint(.green) ``` --- ## 13. Bordered Green Rounded Button (Extra Large) - **URL**: https://www.compotui.com/components/buttons/bordered-green-rounded-button-extra-large - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `buttonWButtonStyleBorderedExtraLargeRoundedRectangleGreen` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, onboarding, paywall ### Description & Overview `Button Bordered Rounded Rectangle Green Extra Large` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift // Implement action for the button in your struct // private func buttonAction() {} Button("Tap me", action: buttonAction) .buttonStyle(.bordered) .controlSize(.extraLarge) .fontWeight(.bold) .buttonBorderShape(.roundedRectangle) .tint(.green) ``` --- ## 14. Icon Button (Small) - **URL**: https://www.compotui.com/components/buttons/icon-button-small - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `buttonIconOnlySmall` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, onboarding, paywall ### Description & Overview `Button Icon Small` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift // Implement action for the button in your struct // private func buttonAction() {} Button("Tap me", systemImage: "plus", action: buttonAction) .buttonStyle(.bordered) .labelStyle(.iconOnly) .controlSize(.small) .buttonBorderShape(.circle) .tint(.green) ``` --- ## 15. Icon Button (Regular) - **URL**: https://www.compotui.com/components/buttons/icon-button-regular - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `buttonIconOnlyRegular` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, onboarding, paywall ### Description & Overview `Button Icon Regular` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift // Implement action for the button in your struct // private func buttonAction() {} Button("Tap me", systemImage: "plus", action: buttonAction) .buttonStyle(.bordered) .labelStyle(.iconOnly) .controlSize(.regular) .buttonBorderShape(.circle) .tint(.green) ``` --- ## 16. Icon Button (Large) - **URL**: https://www.compotui.com/components/buttons/icon-button-large - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `buttonIconOnlyLarge` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, onboarding, paywall ### Description & Overview `Button Icon Large` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift // Implement action for the button in your struct // private func buttonAction() {} Button("Tap me", systemImage: "plus", action: buttonAction) .buttonStyle(.bordered) .labelStyle(.iconOnly) .controlSize(.large) .buttonBorderShape(.circle) .tint(.green) ``` --- ## 17. Icon Button (Extra Large) - **URL**: https://www.compotui.com/components/buttons/icon-button-extra-large - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `buttonIconOnlyExtraLarge` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, onboarding, paywall ### Description & Overview `Button Icon Extra Large` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift // Implement action for the button in your struct // private func buttonAction() {} Button("Tap me", systemImage: "plus", action: buttonAction) .buttonStyle(.bordered) .labelStyle(.iconOnly) .fontWeight(.bold) .controlSize(.extraLarge) .buttonBorderShape(.circle) .tint(.green) ``` --- ## 18. Prominent Button (Small) - **URL**: https://www.compotui.com/components/buttons/prominent-button-small - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `buttonProminentSmall` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, onboarding, paywall ### Description & Overview `Button Prominent Small` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift // Implement action for the button in your struct // private func buttonAction() {} Button("Tap me", systemImage: "plus", action: buttonAction) .buttonStyle(.borderedProminent) .labelStyle(.titleAndIcon) .controlSize(.small) .buttonBorderShape(.roundedRectangle) .tint(.green) ``` --- ## 19. Prominent Button (Regular) - **URL**: https://www.compotui.com/components/buttons/prominent-button-regular - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `buttonProminentRegular` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, onboarding, paywall ### Description & Overview `Button Prominent Regular` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift // Implement action for the button in your struct // private func buttonAction() {} Button("Tap me", systemImage: "plus", action: buttonAction) .buttonStyle(.borderedProminent) .labelStyle(.titleAndIcon) .controlSize(.regular) .buttonBorderShape(.roundedRectangle) .tint(.green) ``` --- ## 20. Prominent Button (Large) - **URL**: https://www.compotui.com/components/buttons/prominent-button-large - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `buttonProminentLarge` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, onboarding, paywall ### Description & Overview `Button Prominent Large` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift // Implement action for the button in your struct // private func buttonAction() {} Button("Tap me", systemImage: "plus", action: buttonAction) .buttonStyle(.borderedProminent) .labelStyle(.titleAndIcon) .controlSize(.large) .fontWeight(.medium) .buttonBorderShape(.roundedRectangle) .tint(.green) ``` --- ## 21. Prominent Button (Extra Large) - **URL**: https://www.compotui.com/components/buttons/prominent-button-extra-large - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `buttonProminentExtraLarge` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, onboarding, paywall ### Description & Overview `Button Prominent Extra Large` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift // Implement action for the button in your struct // private func buttonAction() {} Button("Tap me", systemImage: "plus", action: buttonAction) .buttonStyle(.borderedProminent) .labelStyle(.titleAndIcon) .fontWeight(.bold) .controlSize(.extraLarge) .buttonBorderShape(.roundedRectangle) .tint(.green) ``` --- ## 22. Prominent Destructive Button (Large) - **URL**: https://www.compotui.com/components/buttons/prominent-destructive-button-large - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `buttonProminentDestructiveLarge` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings ### Description & Overview `Button Prominent Destructive Large` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift // Implement action for the button in your struct // private func buttonAction() {} Button("Delete", systemImage: "trash", role: .destructive, action: buttonAction) .buttonStyle(.borderedProminent) .labelStyle(.titleAndIcon) .fontWeight(.medium) .controlSize(.large) .buttonBorderShape(.roundedRectangle) .tint(.red) ``` --- ## 23. Prominent Destructive Icon Button (Large) - **URL**: https://www.compotui.com/components/buttons/prominent-destructive-icon-button-large - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `buttonProminentDestructiveIconOnlyLarge` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, onboarding, paywall ### Description & Overview `Button Prominent Destructive Icon Large` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift // Implement action for the button in your struct // private func buttonAction() {} Button("Delete", systemImage: "trash", role: .destructive, action: buttonAction) .buttonStyle(.borderedProminent) .labelStyle(.iconOnly) .controlSize(.large) .fontWeight(.heavy) .buttonBorderShape(.roundedRectangle) .tint(.red) ``` --- ## 24. Stat Tile Button with Inflection - **URL**: https://www.compotui.com/components/buttons/stat-tile-button-with-inflection - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `buttonCustomAsStatTile` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: settings, onboarding, paywall - **Keywords**: button, inflection ### Description & Overview `Custom button as stat tile with inflection` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift // Implement the var for a number in your struct: // var stat: Int = 1 Button { // Action for the button } label: { VStack(alignment: .center, spacing: 8) { HStack { Image(systemName: "flame") .foregroundStyle(.orange) Text("Streak") } .frame(maxWidth: .infinity, alignment: .leading) .font(.system(size: 15, weight: .regular, design: .default)) .foregroundStyle(.secondary) HStack { Text("^[\\(stat) \\("Day")](inflect: true)") } .frame(maxWidth: .infinity, alignment: .leading) .font(.system(size: 17, weight: .medium, design: .default)) } .padding() .frame(maxWidth: 160) .background(.thinMaterial) .clipShape(.rect(cornerRadius: 12)) } .buttonStyle(.plain) ``` --- ## 25. Secondary Button Large (Custom Style) - **URL**: https://www.compotui.com/components/buttons/secondary-button-large-custom-style - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `secondaryButtonLargeCustomStyle` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: settings, onboarding, paywall - **Keywords**: extension, custom, button ### Description & Overview `Secondary Button Large CustomStyle` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift import SwiftUI struct SecondaryLargeButtonStyle: ButtonStyle { func makeBody(configuration: Configuration) -> some View { configuration.label .padding(.vertical) .padding(.horizontal, 24) .foregroundStyle(.tint) .font(.system(size: 17, weight: .regular)) .frame(maxWidth: 450, alignment: .center) .frame(height: 50) .background( RoundedRectangle(cornerRadius: 25, style: .continuous) .stroke(.tint, lineWidth: 1) ) } } extension ButtonStyle where Self == SecondaryLargeButtonStyle { static var secondaryLarge: Self { return .init() } } struct SecondaryButtonLargeCustomStyle: View { var body: some View { VStack(alignment: .center, spacing: 16) { Button("Secondary Large Button") { // Action } .buttonStyle(.secondaryLarge) .tint(Color.accentColor) .padding(.horizontal) Button("Add New Item", systemImage: "plus") { // Action } .buttonStyle(.secondaryLarge) .tint(.green) .padding(.horizontal) } } } #Preview { SecondaryButtonLargeCustomStyle() } ``` --- ## 26. Secondary Button Medium (Custom Style) - **URL**: https://www.compotui.com/components/buttons/secondary-button-medium-custom-style - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `secondaryButtonMediumCustomStyle` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: settings, onboarding, paywall ### Description & Overview `Secondary Button Medium Custom Style` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift import SwiftUI struct SecondaryMediumButtonStyle: ButtonStyle { func makeBody(configuration: Configuration) -> some View { configuration.label .padding(.vertical) .padding(.horizontal, 16) .foregroundStyle(.tint) .font(.system(size: 15, weight: .regular)) .frame(maxWidth: 190, alignment: .center) .frame(height: 34) .background( RoundedRectangle(cornerRadius: 25, style: .continuous) .stroke(.tint, lineWidth: 1) ) } } extension ButtonStyle where Self == SecondaryMediumButtonStyle { static var secondaryMedium: Self { return .init() } } struct SecondaryButtonMediumCustomStyle: View { var body: some View { VStack(alignment: .center, spacing: 16) { Button("Secondary Medium") { // Action } .buttonStyle(.secondaryMedium) .tint(Color.accentColor) .padding(.horizontal) Button("Add New Item", systemImage: "plus") { // Action } .buttonStyle(.secondaryMedium) .tint(.green) .padding(.horizontal) } } } #Preview { SecondaryButtonMediumCustomStyle() } ``` --- ## 27. Subscription Button Simple - **URL**: https://www.compotui.com/components/buttons/subscription-button-simple - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `subscriptionButtonSimple` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, onboarding, paywall ### Description & Overview `Subscription Button Simple` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift Button { // Action } label: { Text("Start My Free Trial") .foregroundStyle(.white) .font(.system(size: 17, weight: .bold)) .padding() .frame(maxWidth: 450, alignment: .center) .background { RoundedRectangle(cornerRadius: 12, style: .continuous) .fill(Color.accentColor) } } ``` --- ## 28. Update Button - **URL**: https://www.compotui.com/components/buttons/update-button - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `updateButton` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, dashboard ### Description & Overview `Update Button` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - App settings, preferences, and account configuration screens - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI struct UpdateButton: View { var body: some View { Button { // Update action } label: { Label("Update", systemImage: "arrow.clockwise.circle.fill") .foregroundStyle(.secondary) .frame(maxWidth: .infinity) .padding(.vertical, 16) .padding(.horizontal, 24) .background(.quaternary, in: .containerRelative) } } } #Preview { UpdateButton() } ``` --- ## 29. Record Button with State - **URL**: https://www.compotui.com/components/buttons/record-button-with-state - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `recordButton` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: dashboard - **Keywords**: button, state ### Description & Overview `Record Button with State` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI struct UseRecordButton: View { @State private var isRecordButtonActive: Bool = true var body: some View { RecordButton(color: isRecordButtonActive ? .red : .secondary) } } #Preview { UseRecordButton() } struct RecordButton: View { let color: Color var body: some View { Circle() .foregroundStyle(color) .frame(width: 62, height: 62) .overlay { Circle() .stroke(lineWidth: 2) .padding(5) .foregroundStyle(Color(uiColor:.systemBackground)) } } } #Preview { RecordButton(color: .red) } ``` --- ## 30. Tertiary Icon Button Large - **URL**: https://www.compotui.com/components/buttons/tertiary-icon-button-large - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `tertiaryIconButtonLarge` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: dashboard ### Description & Overview `Tertiary Icon Button Large` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI struct UseTertiaryIconButtonLarge: View { var body: some View { TertiaryIconButtonLarge(action: { print("Button tapped") }, sfSymbol: "plus", tint: .blue) } } #Preview { UseTertiaryIconButtonLarge() } struct TertiaryIconButtonLarge: View { let action: () -> Void let sfSymbol: String let tint: Color var body: some View { Button(action: action) { Image(systemName: sfSymbol) } .buttonStyle(.bordered) .controlSize(.large) .tint(tint) } } #Preview { TertiaryIconButtonLarge(action: {print("Button tapped")}, sfSymbol: "trash", tint: .red) } ``` --- ## 31. Done Button - **URL**: https://www.compotui.com/components/buttons/done-button - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `doneButton` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, onboarding, paywall - **Keywords**: button, done, task, complete, success ### Description & Overview A versatile button component for marking tasks as complete, with auditory, sensory and visual feedback to enhance user experience. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift import Foundation import SwiftUI import AVFoundation /// You can download the success sounds from Pixabay for free: https://pixabay.com/sound-effects/search/success/ /// I used the instructions and the following code from Hacking with Swift to enable the sound: https://www.hackingwithswift.com/forums/swiftui/playing-sound/4921 struct DoneButton: View { @State private var isDone: Bool = false @State var audioPlayer: AVAudioPlayer! private func playSound(_ soundFileName : String) { guard let soundURL = Bundle.main.url(forResource: soundFileName, withExtension: nil) else { fatalError("Unable to find \\(soundFileName)") } do { audioPlayer = try AVAudioPlayer(contentsOf: soundURL) } catch { print(error.localizedDescription) } audioPlayer.play() } var body: some View { Button { isDone.toggle() if isDone { /// You need to place the file with the sound in your project bundle, see instructions here: https://www.hackingwithswift.com/forums/swiftui/playing-sound/4921 playSound("success.mp3") } } label: { Image(systemName: isDone ? "checkmark.circle" : "circle") .font(.title) .fontWeight(.semibold) .foregroundStyle(isDone ? .green : .secondary) .symbolEffect(.bounce, value: isDone) .sensoryFeedback(.success, trigger: isDone) } } } #Preview { DoneButton() } ``` --- ## 32. Favorite Button - **URL**: https://www.compotui.com/components/buttons/favorite-button - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `favoriteButton` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: dashboard, onboarding, paywall - **Keywords**: favorite, button, toggle, heart ### Description & Overview A customizable favorite button that toggles between a filled heart and an empty heart symbol, perfect for indicating user preferences. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import Foundation import SwiftUI struct FavoriteButton: View { @Binding var isFavorite: Bool var body: some View { Button(action: { isFavorite.toggle() }) { /// You can download custom symbols used in this component: /// custom.heart.fill: https://drive.google.com/file/d/1FrubVKYkTqG61-iAA0LVv5MnjQKx1WUI/view?usp=sharing /// custom.heart: https://drive.google.com/file/d/1FbTd5rpydjMYCSktub2k9N7YeKVSDMVN/view?usp=sharing Image(isFavorite ? "custom.heart.fill" : "custom.heart") .font(.system(size: 20)) .fontWeight(.regular) .symbolRenderingMode(.multicolor) .symbolEffect(.bounce, value: isFavorite) .shadow(color: .gray.opacity(0.5), radius: 5, x: 0, y: 2) .sensoryFeedback(.success, trigger: isFavorite) } .buttonStyle(PlainButtonStyle()) } } struct UseFavoriteButton: View { @State private var isFavorite: Bool = false var body: some View { FavoriteButton(isFavorite: $isFavorite) } } #Preview { UseFavoriteButton() } ``` --- ## 33. Open Settings Button - **URL**: https://www.compotui.com/components/buttons/open-settings-button - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `openSettingsButton` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings - **Keywords**: button, settings, navigation ### Description & Overview A handy button to navigate users directly to the device settings page, featuring customizable icons and colors. ### Recommended Use Cases - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift import SwiftUI struct UseOpenSettingsButton: View { var body: some View { List { OpenSettingsButton(labelText: "Device Settings", labelIconSymbol: "gear", labelIconBgColor: .gray, trailingSymbol: "arrow.up.right.square", trailingSymbolColor: .secondary) } } } #Preview { UseOpenSettingsButton() } struct OpenSettingsButton: View { var labelText: String var labelIconSymbol: String var labelIconBgColor: Color var trailingSymbol: String var trailingSymbolColor: Color private func openSettings() { guard let settingsURL = URL(string: UIApplication.openSettingsURLString) else { return } UIApplication.shared.open(settingsURL) } var body: some View { Button { openSettings() } label: { HStack { Label { Text(labelText) } icon: { Image(systemName: labelIconSymbol) .font(.system(size: 15)) .foregroundStyle(.white) .frame(width: 28, height: 28, alignment: .center) .background(labelIconBgColor, in: RoundedRectangle(cornerRadius: 7, style: .continuous)) } Spacer() Image(systemName: trailingSymbol) .foregroundStyle(trailingSymbolColor) } .contentShape(Rectangle()) } .buttonStyle(.plain) } } ``` --- ## 34. Sign in with Apple Button - **URL**: https://www.compotui.com/components/buttons/sign-in-with-apple-button - **Category**: [Buttons](https://www.compotui.com/components/buttons) - **Identifier**: `appleSignInButton` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: settings, onboarding, account - **Keywords**: sign, authenticate ### Description & Overview `Sign in with Apple Button` is an interactive button component designed for clean actions and primary/secondary touch targets. ### Recommended Use Cases - First-run onboarding flows and feature introductions - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift import SwiftUI import AuthenticationServices // Import AuthenticationServices // Add "Sign in with Apple" capability. // For styling reference and guidance visit: https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple#Creating-a-custom-Sign-in-with-Apple-button struct AppleSignInButton: View { @Environment(\\.colorScheme) private var colorScheme let label: SignInWithAppleButton.Label let scope: [ASAuthorization.Scope] let height: Double let cornerRadius: Double private func handleSuccess(with authorization: ASAuthorization) { if let userCredential = authorization.credential as? ASAuthorizationAppleIDCredential { print("Successfuly authenticated user: \\(userCredential.user)") // Your code to handle success. } } private func handleError(with error: Error) { print("Could not authenticate user: \\(error.localizedDescription)") // Your code to handle failure. } var body: some View { SignInWithAppleButton(label) {request in request.requestedScopes = scope } onCompletion: { result in switch result { case .success(let authorization): handleSuccess(with: authorization) case .failure(let error): handleError(with: error) } } .frame(height: height) .cornerRadius(cornerRadius) .shadow(color: Color.gray, radius: 3) .signInWithAppleButtonStyle(colorScheme == .dark ? .white : .black) } } struct UseAppleSignInButton: View { var body: some View { VStack(alignment: .center, spacing: 8) { AppleSignInButton(label: .signIn, scope: [.fullName, .email], height: 44, cornerRadius: 0) AppleSignInButton(label: .signUp, scope: [.fullName, .email], height: 44, cornerRadius: 12) AppleSignInButton(label: .continue, scope: [.fullName, .email], height: 44, cornerRadius: 25) } .padding() } } #Preview { UseAppleSignInButton() } ``` --- ## 35. Text with Uneven Background & Gradient - **URL**: https://www.compotui.com/components/texts/text-with-uneven-background-gradient - **Category**: [Texts & Typography](https://www.compotui.com/components/texts) - **Identifier**: `textWUnevenGradientBackground` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: onboarding - **Keywords**: text, gradient ### Description & Overview `Text with uneven background and gradient` is a modular SwiftUI text component designed for modern iOS apps. ### Recommended Use Cases - First-run onboarding flows and feature introductions ### SwiftUI Code ```swift Text("Hello, World!") .foregroundStyle(.white) .padding() .background(.blue.gradient) .clipShape(.rect(cornerRadii: .init(topLeading: 0, bottomLeading: 23.0, bottomTrailing: 0, topTrailing: 23.0), style: .continuous)) .shadow(color: .blue.opacity(0.5), radius: 1) ``` --- ## 36. Text with Number Inflection Rules - **URL**: https://www.compotui.com/components/texts/text-with-number-inflection-rules - **Category**: [Texts & Typography](https://www.compotui.com/components/texts) - **Identifier**: `textWNumberInflectionRule` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, dashboard ### Description & Overview `Text wih number using inflection rule` is a modular SwiftUI text component designed for modern iOS apps. ### Recommended Use Cases - App settings, preferences, and account configuration screens - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift // Implement var num0, num1, Num2 in your struct: // var num0: Int = 0 // var num1: Int = 1 // var num2: Int = 2 Text("^[\\(num0) \\("Apple")](inflect: true)") Text("^[\\(num1) \\("Apple")](inflect: true)") Text("^[\\(num2) \\("Apple")](inflect: true)") Text("^[\\(num0) \\("Person")](inflect: true)") Text("^[\\(num1) \\("Person")](inflect: true)") Text("^[\\(num2) \\("Person")](inflect: true)") Text("^[\\(num0) \\("Mouse")](inflect: true)") Text("^[\\(num1) \\("Mouse")](inflect: true)") Text("^[\\(num2) \\("Mouse")](inflect: true)") ``` --- ## 37. Text with Markdown Links - **URL**: https://www.compotui.com/components/texts/text-with-markdown-links - **Category**: [Texts & Typography](https://www.compotui.com/components/texts) - **Identifier**: `textLinksBasic` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, onboarding, paywall ### Description & Overview `Text with links using markdown` is a modular SwiftUI text component designed for modern iOS apps. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift Text("**[Terms of Service](https://docs.google.com/document/d/1Elo7_XJlsED5jwCVNLUmVEtjOgkW0rcFsRYPtDuPLlg/view)** and **[Privacy Policy](https://docs.google.com/document/d/1qCqehg-XP7ap-5VgnUSl80q2N0tDd1Qix81ilc0l0uk/view)**") .font(.footnote) .foregroundStyle(Color.accentColor) ``` --- ## 38. Text with Dashed Stroke - **URL**: https://www.compotui.com/components/texts/text-with-dashed-stroke - **Category**: [Texts & Typography](https://www.compotui.com/components/texts) - **Identifier**: `textDashedStroke` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: settings, onboarding, paywall ### Description & Overview `Text with dashed stroke` is a custom geometric graphic or decorative layout element. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift VStack { Text("Drop your weapons!") } .padding() .background { RoundedRectangle(cornerRadius: 12, style: .continuous) .fill(.ultraThinMaterial) .stroke( Color.red, style: StrokeStyle( lineWidth: 4, lineCap: .square, lineJoin: .miter, miterLimit: 0, dash: [], dashPhase: 0 ) ) .stroke( Color.yellow, style: StrokeStyle( lineWidth: 4, lineCap: .square, lineJoin: .miter, miterLimit: 0, dash: [15], dashPhase: 0 ) ) } ``` --- ## 39. Text System Default Variants - **URL**: https://www.compotui.com/components/texts/text-system-default-variants - **Category**: [Texts & Typography](https://www.compotui.com/components/texts) - **Identifier**: `textSystemDefaultVariant` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings ### Description & Overview `Text system default variants` is a modular SwiftUI text component designed for modern iOS apps. ### Recommended Use Cases - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift HStack(spacing: 16) { VStack(alignment: .trailing) { Text("Default") .font(.system(size: 14, weight: .medium, design: .default)) Text("Upright") .font(.system(size: 14, weight: .medium, design: .default)) .padding(.bottom, 4) VStack(alignment: .trailing, spacing: 4) { Text("Text") .font(.system(size: 17, weight: .ultraLight, design: .default)) Text("Text") .font(.system(size: 17, weight: .thin, design: .default)) Text("Text") .font(.system(size: 17, weight: .light, design: .default)) Text("Text") .font(.system(size: 17, weight: .regular, design: .default)) Text("Text") .font(.system(size: 17, weight: .medium, design: .default)) Text("Text") .font(.system(size: 17, weight: .semibold, design: .default)) Text("Text") .font(.system(size: 17, weight: .bold, design: .default)) Text("Text") .font(.system(size: 17, weight: .heavy, design: .default)) Text("Text") .font(.system(size: 17, weight: .black, design: .default)) } } VStack(alignment: .trailing) { Text("Default") .font(.system(size: 14, weight: .medium, design: .default)) Text("Italic") .font(.system(size: 14, weight: .medium, design: .default)) .padding(.bottom, 4) VStack(alignment: .trailing, spacing: 4) { Text("Text") .font(.system(size: 17, weight: .ultraLight, design: .default)) .italic() Text("Text") .font(.system(size: 17, weight: .thin, design: .default)) .italic() Text("Text") .font(.system(size: 17, weight: .light, design: .default)) .italic() Text("Text") .font(.system(size: 17, weight: .regular, design: .default)) .italic() Text("Text") .font(.system(size: 17, weight: .medium, design: .default)) .italic() Text("Text") .font(.system(size: 17, weight: .semibold, design: .default)) .italic() Text("Text") .font(.system(size: 17, weight: .bold, design: .default)) .italic() Text("Text") .font(.system(size: 17, weight: .heavy, design: .default)) .italic() Text("Text") .font(.system(size: 17, weight: .black, design: .default)) .italic() } } } ``` --- ## 40. Text System Monospace Variants - **URL**: https://www.compotui.com/components/texts/text-system-monospace-variants - **Category**: [Texts & Typography](https://www.compotui.com/components/texts) - **Identifier**: `textSystemMonoVariant` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings ### Description & Overview `Text System Mono Variants` is a modular SwiftUI text component designed for modern iOS apps. ### Recommended Use Cases - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift HStack(spacing: 16) { VStack(alignment: .trailing) { Text("Mono") .font(.system(size: 14, weight: .medium, design: .default)) Text("Upright") .font(.system(size: 14, weight: .medium, design: .default)) .padding(.bottom, 4) VStack(alignment: .trailing, spacing: 4) { Text("Text") .font(.system(size: 17, weight: .ultraLight, design: .monospaced)) Text("Text") .font(.system(size: 17, weight: .thin, design: .monospaced)) Text("Text") .font(.system(size: 17, weight: .light, design: .monospaced)) Text("Text") .font(.system(size: 17, weight: .regular, design: .monospaced)) Text("Text") .font(.system(size: 17, weight: .medium, design: .monospaced)) Text("Text") .font(.system(size: 17, weight: .semibold, design: .monospaced)) Text("Text") .font(.system(size: 17, weight: .bold, design: .monospaced)) Text("Text") .font(.system(size: 17, weight: .heavy, design: .monospaced)) Text("Text") .font(.system(size: 17, weight: .black, design: .monospaced)) } } VStack(alignment: .trailing) { Text("Mono") .font(.system(size: 14, weight: .medium, design: .default)) Text("Italic") .font(.system(size: 14, weight: .medium, design: .default)) .padding(.bottom, 4) VStack(alignment: .trailing, spacing: 4) { Text("Text") .font(.system(size: 17, weight: .ultraLight, design: .monospaced)) .italic() Text("Text") .font(.system(size: 17, weight: .thin, design: .monospaced)) .italic() Text("Text") .font(.system(size: 17, weight: .light, design: .monospaced)) .italic() Text("Text") .font(.system(size: 17, weight: .regular, design: .monospaced)) .italic() Text("Text") .font(.system(size: 17, weight: .medium, design: .monospaced)) .italic() Text("Text") .font(.system(size: 17, weight: .semibold, design: .monospaced)) .italic() Text("Text") .font(.system(size: 17, weight: .bold, design: .monospaced)) .italic() Text("Text") .font(.system(size: 17, weight: .heavy, design: .monospaced)) .italic() Text("Text") .font(.system(size: 17, weight: .black, design: .monospaced)) .italic() } } } ``` --- ## 41. Text System Rounded Variants - **URL**: https://www.compotui.com/components/texts/text-system-rounded-variants - **Category**: [Texts & Typography](https://www.compotui.com/components/texts) - **Identifier**: `textSystemRoundedVariant` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings ### Description & Overview `Text System Rounded Variant` is a modular SwiftUI text component designed for modern iOS apps. ### Recommended Use Cases - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift HStack(spacing: 16) { VStack(alignment: .trailing) { Text("Rounded") .font(.system(size: 14, weight: .medium, design: .default)) Text("Upright") .font(.system(size: 14, weight: .medium, design: .default)) .padding(.bottom, 4) VStack(alignment: .trailing, spacing: 4) { Text("Text") .font(.system(size: 17, weight: .ultraLight, design: .rounded)) Text("Text") .font(.system(size: 17, weight: .thin, design: .rounded)) Text("Text") .font(.system(size: 17, weight: .light, design: .rounded)) Text("Text") .font(.system(size: 17, weight: .regular, design: .rounded)) Text("Text") .font(.system(size: 17, weight: .medium, design: .rounded)) Text("Text") .font(.system(size: 17, weight: .semibold, design: .rounded)) Text("Text") .font(.system(size: 17, weight: .bold, design: .rounded)) Text("Text") .font(.system(size: 17, weight: .heavy, design: .rounded)) Text("Text") .font(.system(size: 17, weight: .black, design: .rounded)) } } } ``` --- ## 42. Text System Serif Variants - **URL**: https://www.compotui.com/components/texts/text-system-serif-variants - **Category**: [Texts & Typography](https://www.compotui.com/components/texts) - **Identifier**: `textSystemSerifVariant` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings ### Description & Overview `Text System Serif Variant` is a modular SwiftUI text component designed for modern iOS apps. ### Recommended Use Cases - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift HStack(spacing: 16) { VStack(alignment: .trailing) { Text("Serif") .font(.system(size: 14, weight: .medium, design: .default)) Text("Upright") .font(.system(size: 14, weight: .medium, design: .default)) .padding(.bottom, 4) VStack(alignment: .trailing, spacing: 4) { Text("Text") .font(.system(size: 17, weight: .ultraLight, design: .serif)) Text("Text") .font(.system(size: 17, weight: .thin, design: .serif)) Text("Text") .font(.system(size: 17, weight: .light, design: .serif)) Text("Text") .font(.system(size: 17, weight: .regular, design: .serif)) Text("Text") .font(.system(size: 17, weight: .medium, design: .serif)) Text("Text") .font(.system(size: 17, weight: .semibold, design: .serif)) Text("Text") .font(.system(size: 17, weight: .bold, design: .serif)) Text("Text") .font(.system(size: 17, weight: .heavy, design: .serif)) Text("Text") .font(.system(size: 17, weight: .black, design: .serif)) } } VStack(alignment: .trailing) { Text("Serif") .font(.system(size: 14, weight: .medium, design: .default)) Text("Italic") .font(.system(size: 14, weight: .medium, design: .default)) .padding(.bottom, 4) VStack(alignment: .trailing, spacing: 4) { Text("Text") .font(.system(size: 17, weight: .ultraLight, design: .serif)) .italic() Text("Text") .font(.system(size: 17, weight: .thin, design: .serif)) .italic() Text("Text") .font(.system(size: 17, weight: .light, design: .serif)) .italic() Text("Text") .font(.system(size: 17, weight: .regular, design: .serif)) .italic() Text("Text") .font(.system(size: 17, weight: .medium, design: .serif)) .italic() Text("Text") .font(.system(size: 17, weight: .semibold, design: .serif)) .italic() Text("Text") .font(.system(size: 17, weight: .bold, design: .serif)) .italic() Text("Text") .font(.system(size: 17, weight: .heavy, design: .serif)) .italic() Text("Text") .font(.system(size: 17, weight: .black, design: .serif)) .italic() } } } ``` --- ## 43. Text Style Default Variants - **URL**: https://www.compotui.com/components/texts/text-style-default-variants - **Category**: [Texts & Typography](https://www.compotui.com/components/texts) - **Identifier**: `textStyleDefaultVariants` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings ### Description & Overview `Text Style Default Variants` is a modular SwiftUI text component designed for modern iOS apps. ### Recommended Use Cases - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift Text("Large Title") .font(.system(.largeTitle)) Text("Title") .font(.system(.title)) Text("Title2") .font(.system(.title2)) Text("Title3") .font(.system(.title3)) Text("Headline") .font(.system(.headline)) Text("Subheadline") .font(.system(.subheadline)) Text("Body") .font(.system(.body)) Text("Collout") .font(.system(.callout)) Text("Caption") .font(.system(.caption)) Text("Caption2") .font(.system(.caption2)) Text("Footnote") .font(.system(.footnote)) ``` --- ## 44. Text Date Styling Options - **URL**: https://www.compotui.com/components/texts/text-date-styling-options - **Category**: [Texts & Typography](https://www.compotui.com/components/texts) - **Identifier**: `textDateStylingDefaultOptions` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings ### Description & Overview `Text Date Styling Default Options` is a modular SwiftUI text component designed for modern iOS apps. ### Recommended Use Cases - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift Text(.now, style: .date) Text(.now, style: .time) Text(.now, style: .offset) Text(.now, style: .relative) Text(.now, style: .timer) ``` --- ## 45. Text Styling Default Options - **URL**: https://www.compotui.com/components/texts/text-styling-default-options - **Category**: [Texts & Typography](https://www.compotui.com/components/texts) - **Identifier**: `textStylingDefaultOptions` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings ### Description & Overview `Text Styling Default Options` is a modular SwiftUI text component designed for modern iOS apps. ### Recommended Use Cases - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift struct TextStylingDefaultOptions: View { @State private var isBold: Bool = true @State private var isItalic: Bool = true @State private var strike: Bool = true @State private var underline: Bool = true @State private var isMonospaced: Bool = true var body: some View { ScrollView { VStack(spacing: 8) { VStack(spacing: 8) { Text("Text with .foregroundStyle(.foreground)") .foregroundStyle(.foreground) Text("Text with .bold()") .bold() Text("Text in bold based on state value") .bold(isBold) Text("Text with .italic()") .italic() Text("Text in italic based on state value") .italic(isItalic) Text("Text with .strikethrough()") .strikethrough() Text("Strike based on state value") .strikethrough(strike, color: .red) Text("Dash strike pattern") .strikethrough(strike, pattern: .dash, color: .red) Text("DashDot strike pattern") .strikethrough(strike, pattern: .dashDot, color: .red) Text("DashDotDot strike pattern") .strikethrough(strike, pattern: .dashDotDot, color: .red) } VStack(spacing: 8) { Text("Dot strike pattern") .strikethrough(strike, pattern: .dot, color: .red) Text("Solid strike pattern") .strikethrough(strike, pattern: .solid, color: .red) Text("Text with underline") .underline() Text("Underline based on state value") .underline(underline) Text("Underline based on state value") .underline(underline, color: .red) Text("Dash underline") .underline(underline, pattern: .dash, color: .red) Text("DashDot underline") .underline(underline, pattern: .dashDot, color: .red) Text("DashDotDot underline") .underline(underline, pattern: .dashDotDot, color: .red) Text("Dot underline") .underline(underline, pattern: .dot, color: .red) Text("Solid underline") .underline(underline, pattern: .solid, color: .red) } VStack(spacing: 8) { Text("Monospaced") .monospaced() Text("Monospaced based on state value") .monospaced(isMonospaced) Text("MonospacedDigit") .monospacedDigit() Text("Text with custom kerning") .kerning(5.0) Text("Text with custom tracking") .tracking(4.0) Text("Text with custom baseline offset") .baselineOffset(10.0) Text("Text Uppercased") .textCase(.uppercase) Text("Text Lowercased") .textCase(.lowercase) } } .font(.system(size: 15)) } } } #Preview { TextStylingDefaultOptions() } ``` --- ## 46. Text Truncation Modes - **URL**: https://www.compotui.com/components/texts/text-truncation-modes - **Category**: [Texts & Typography](https://www.compotui.com/components/texts) - **Identifier**: `textTruncationModes` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings ### Description & Overview `Text with truncation modes` is a modular SwiftUI text component designed for modern iOS apps. ### Recommended Use Cases - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift VStack(spacing: 8) { Text("Compot is a collection of reusable SwiftUI components and templates designed for faster development of mobile apps. The Compot app is available for iPhones and iPads. You can use Compot as a reference to various UI components, as a source of design inspiration, or to copy the code and use it in your projects.") .frame(width: 300, height: 150) .truncationMode(.head) Text("Compot is a collection of reusable SwiftUI components and templates designed for faster development of mobile apps. The Compot app is available for iPhones and iPads. You can use Compot as a reference to various UI components, as a source of design inspiration, or to copy the code and use it in your projects.") .frame(width: 300, height: 150) .truncationMode(.middle) Text("Compot is a collection of reusable SwiftUI components and templates designed for faster development of mobile apps. The Compot app is available for iPhones and iPads. You can use Compot as a reference to various UI components, as a source of design inspiration, or to copy the code and use it in your projects.") .frame(width: 300, height: 150) .truncationMode(.tail) } ``` --- ## 47. Text with Gradient - **URL**: https://www.compotui.com/components/texts/text-with-gradient - **Category**: [Texts & Typography](https://www.compotui.com/components/texts) - **Identifier**: `textWGradient` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, onboarding, paywall ### Description & Overview `Text with gradient` is a modular SwiftUI text component designed for modern iOS apps. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift import SwiftUI struct TextWGradient: View { var body: some View { Text("iOS") .font(.largeTitle) .foregroundStyle(LinearGradient(colors: [.pink, .purple, .blue], startPoint: .topLeading, endPoint: .bottomTrailing)) } } #Preview { TextWGradient() } ``` --- ## 48. Relative Date Text - **URL**: https://www.compotui.com/components/texts/relative-date-text - **Category**: [Texts & Typography](https://www.compotui.com/components/texts) - **Identifier**: `textWDateFormatRelative` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings ### Description & Overview `Text with date using format relative` is a modular SwiftUI text component designed for modern iOS apps. ### Recommended Use Cases - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift import SwiftUI struct TextWDateFormatRelative: View { let now: Date = Date.now let todayStart: Date = Calendar.current.startOfDay(for: Date.now) let yesterday: Date = Calendar.current.date(byAdding: .day, value: -1, to: Date.now)! let tomorrow: Date = Calendar.current.date(byAdding: .day, value: 1, to: Date.now)! var body: some View { VStack { Text(now, format: .relative(presentation: .named, unitsStyle: .spellOut)) Text(todayStart, format: .relative(presentation: .named, unitsStyle: .wide)) Text(yesterday, format: .relative(presentation: .named, unitsStyle: .spellOut)) Text(tomorrow, format: .relative(presentation: .named, unitsStyle: .spellOut)) } } } #Preview { TextWDateFormatRelative() } ``` --- ## 49. Text Sequence with Timer - **URL**: https://www.compotui.com/components/texts/text-sequence-with-timer - **Category**: [Texts & Typography](https://www.compotui.com/components/texts) - **Identifier**: `textSequenceWTimer` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: settings, onboarding, paywall - **Keywords**: timer ### Description & Overview `Text sequence using timer` is a modular SwiftUI text component designed for modern iOS apps. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift import SwiftUI struct TextSequenceWTimer: View { @State private var sequence: Int = 1 var timer = Timer.publish(every: 3.0, tolerance: 0.5, on: .main, in: .common).autoconnect() var body: some View { VStack(alignment: .center, spacing: 24) { ZStack { Text("Welcome to Compot") .opacity(sequence == 1 ? 1: 0) Text("I'm happy you are here") .opacity(sequence == 2 ? 1: 0) Text("Enjoy the app, have fun!") .opacity(sequence >= 3 ? 1: 0) } .font(.system(size: 22, design: .serif)) .onReceive(timer, perform: { _ in withAnimation(.easeInOut(duration: 1)) { sequence = sequence + 1 } }) Button { withAnimation(.easeInOut(duration: 0.5)) { sequence = 1 } } label: { Text("Restart") } .buttonStyle(.borderedProminent) .opacity(sequence < 4 ? 0 : 1) } } } #Preview { TextSequenceWTimer() } ``` --- ## 50. Text Typing & Retracting Animation - **URL**: https://www.compotui.com/components/texts/text-typing-retracting-animation - **Category**: [Texts & Typography](https://www.compotui.com/components/texts) - **Identifier**: `textTypingRetractingAnimation` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: onboarding, paywall - **Keywords**: text, animation, typing, retracting, steve jobs ### Description & Overview An engaging text animation component that types out and retracts text, perfect for creating dynamic and attention-grabbing UI elements. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers ### SwiftUI Code ```swift import SwiftUI struct UseTextTypingRetractingAnimation: View { var body: some View { VStack { TextTypingRetractingAnimation(textsToAnimate: ["We stay hungry.", "We stay foolish.", "We promise.", "Thank you Steve!"]) } .padding() } } #Preview { UseTextTypingRetractingAnimation() } struct TextTypingRetractingAnimation: View { var textsToAnimate: [String] @State private var animatedText: String = "" @State private var currentIndex: Int = 0 @State private var isAnimating: Bool = false var body: some View { VStack { Text(animatedText) .font(.system(size: 22, weight: .bold, design: .serif)) .padding() .frame(height: 80) } .onAppear { guard !textsToAnimate.isEmpty else { return } animateText() } } private func animateText() { guard currentIndex < textsToAnimate.count else { return } let text = textsToAnimate[currentIndex] animatedText = "" isAnimating = true // Type out the text for (index, character) in text.enumerated() { DispatchQueue.main.asyncAfter(deadline: .now() + Double(index) * 0.12) { animatedText.append(character) // Check if it's the last character if index == text.count - 1 { // If it's not the last text, initiate the retraction animation if currentIndex < textsToAnimate.count - 1 { DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) { retractText() } } else { // If it's the last text, stop the animation isAnimating = false } } } } } private func retractText() { let text = animatedText for index in 0..> 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 BannerPromoWCustomColorGradient: View { @Environment(\\.colorScheme) private var scheme let title: String let subtitle: String let bannerCTA: String let bannerBgLight: String let bannerBgDark: String var body: some View { VStack(alignment: .leading, spacing: 8) { Text(title) .font(.system(size: 22, design: .serif)) .foregroundStyle(.primary) Text(subtitle) .font(.system(size: 15, design: .default)) .multilineTextAlignment(.leading) .frame(maxWidth: 420, alignment: .leading) Divider() HStack { Text(bannerCTA) Image(systemName: "chevron.right") .font(.footnote) .foregroundStyle(.secondary) .fontWeight(.regular) } .font(.system(size: 17, design: .default)) .fontWeight(.semibold) .foregroundStyle(.primary) } .padding() .frame(maxWidth: .infinity, alignment: .leading) .background(scheme == .dark ? Color(hex: bannerBgDark).gradient : Color(hex: bannerBgLight).gradient) .clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous)) } } ``` --- ## 62. Banner with Action – TipKit Style - **URL**: https://www.compotui.com/components/banners/banner-with-action-tipkit-style - **Category**: [Banners & Promos](https://www.compotui.com/components/banners) - **Identifier**: `bannerWActionTipKitStyle` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: settings, dashboard - **Keywords**: banner, notification, action, tip, swiftui ### Description & Overview A versatile and stylish banner component that can be used to display notifications or tips with an action button. Ideal for improving user engagement and feature discovery. ### Recommended Use Cases - App settings, preferences, and account configuration screens - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI struct UseBannerWActionTipKitStyle: View { @State private var showBanner: Bool = true private func bannerAction() { print("Tap on the button") } var body: some View { VStack { if showBanner { BannerWActionTipKitStyle(isShowing: $showBanner, symbol: "photo.badge.plus", title: "Add New Tour", message: "You can add a new tour to your itinerary in two easy steps. Try it out, you will love it!", buttonLabel: "Get Started", action: bannerAction) } else { Button("Show Banner") { showBanner = true } } } .padding() } } #Preview { UseBannerWActionTipKitStyle() } struct BannerWActionTipKitStyle: View { @Binding var isShowing: Bool let symbol: String let title: String let message: String let buttonLabel: String let action: () -> Void var body: some View { HStack(alignment: .top, spacing: 12) { Image(systemName: symbol) .font(.system(size: 36, weight: .regular)) .symbolRenderingMode(.multicolor) VStack(alignment: .leading) { VStack(alignment: .leading, spacing: 4) { Text(title) .font(.system(size: 16, weight: .bold)) .foregroundStyle(.primary) .multilineTextAlignment(.leading) Text(message) .font(.system(size: 15, weight: .regular)) .foregroundStyle(.secondary) .multilineTextAlignment(.leading) } .padding(.trailing) Divider() .padding(.bottom, 6) Button { action() } label: { Text(buttonLabel) .font(.system(size: 15, weight: .bold)) } } .padding(.bottom) .frame(maxWidth: 390, alignment: .topLeading) } .padding(.top) .padding(.leading, 12) .frame(maxWidth: .infinity, alignment: .topLeading) .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 12.0, style: .continuous)) .overlay(alignment: .topTrailing) { Button { isShowing = false } label: { Image(systemName: "xmark") .font(.system(size: 16, weight: .bold)) .foregroundStyle(.tertiary) } .padding(.top) .padding(.horizontal, 12) .buttonStyle(.plain) } } } ``` --- ## 63. Feature Card Basic - **URL**: https://www.compotui.com/components/cards/feature-card-basic - **Category**: [Cards & Content Displays](https://www.compotui.com/components/cards) - **Identifier**: `featureCardBasic` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: onboarding, paywall - **Keywords**: onboarding ### Description & Overview `Feature Card Basic` is a structured card layout designed for content presentation, highlights, or feed items. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers ### SwiftUI Code ```swift import SwiftUI struct UseFeatureCardBasic: View { var body: some View { FeatureCardBasic(iconName: "cursorarrow.click.2", featureName: "Feature Name", featureDescription: "Description explaining why the feature is so cool.") } } #Preview { UseFeatureCardBasic() } struct FeatureCardBasic: View { let iconName: String let featureName: String let featureDescription: String var body: some View { HStack(alignment: .center, spacing: 16) { ZStack { RoundedRectangle(cornerRadius: 13.0) .foregroundStyle(.tint) .frame(width: 48, height: 48) Image(systemName: iconName) .font(.title) .foregroundStyle(.white) } VStack(alignment: .leading, spacing: 4) { Text(featureName) .multilineTextAlignment(.leading) .foregroundStyle(.primary) .font(.headline) Text(featureDescription) .multilineTextAlignment(.leading) .foregroundStyle(.secondary) .font(.subheadline) } .frame(maxWidth: 300, alignment: .leading) Spacer() } .frame(maxWidth: .infinity, alignment: .leading) } } #Preview { FeatureCardBasic(iconName: "cursorarrow.click.2", featureName: "Feature Name", featureDescription: "Description explaining why the feature is so cool.") } ``` --- ## 64. Feature Card in Rounded Rectangle - **URL**: https://www.compotui.com/components/cards/feature-card-in-rounded-rectangle - **Category**: [Cards & Content Displays](https://www.compotui.com/components/cards) - **Identifier**: `featureCardInRoundedRectangle` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: onboarding, paywall ### Description & Overview `Feature card in rounded rectangle` is a structured card layout designed for content presentation, highlights, or feed items. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers ### SwiftUI Code ```swift import SwiftUI struct UseFeatureCardInRoundedRectangle: View { var body: some View { FeatureCardInRoundedRectangle(iconName: "cursorarrow.click.2", featureName: "Feature Name", featureDescription: "Description explaining why the feature is so cool.") .padding() } } #Preview { UseFeatureCardInRoundedRectangle() } struct FeatureCardInRoundedRectangle: View { let iconName: String let featureName: String let featureDescription: String var body: some View { HStack(alignment: .center, spacing: 16) { Image(systemName: iconName) .font(.largeTitle) .frame(width: 48) .symbolRenderingMode(.multicolor) VStack(alignment: .leading, spacing: 4) { Text(featureName) .multilineTextAlignment(.leading) .foregroundStyle(.primary) .font(.headline) Text(featureDescription) .multilineTextAlignment(.leading) .font(.subheadline) } .frame(maxWidth: 300, alignment: .leading) Spacer() } .padding() .background { RoundedRectangle(cornerRadius: 12.0) .foregroundStyle(.tint) .opacity(0.25) // .brightness(-0.4) } .frame(maxWidth: .infinity, alignment: .leading) .foregroundStyle(.primary) } } #Preview { FeatureCardInRoundedRectangle(iconName: "cursorarrow.click.2", featureName: "Feature Name", featureDescription: "Description explaining why the feature is so cool.") } ``` --- ## 65. Quote Card Fancy - **URL**: https://www.compotui.com/components/cards/quote-card-fancy - **Category**: [Cards & Content Displays](https://www.compotui.com/components/cards) - **Identifier**: `quoteCardFancy` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: dashboard, onboarding, paywall ### Description & Overview `Quote Card` is a structured card layout designed for content presentation, highlights, or feed items. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI struct UseQuoteCardFancy: View { var body: some View { QuoteCardFancy(quote: "Stay calm and relax. Everything's gonna be alright.", author: "Unknown developer") .padding() } } #Preview { UseQuoteCardFancy() } struct QuoteCardFancy: View { let quote: String let author: String var body: some View { GroupBox(label: Image(systemName: "quote.opening").font(.system(size: 24))) { VStack(alignment: .leading, spacing: 8) { Text(quote) .multilineTextAlignment(.leading) .font(.system(size: 22, weight: .medium, design: .serif)) HStack(alignment: .center, spacing: 4 ) { Text("–") Text(author) } .font(.system(size: 15, weight: .light, design: .default)) } .padding(.vertical, 8) .frame(maxWidth: 420, alignment: .topLeading) } .backgroundStyle(LinearGradient(gradient: Gradient(colors:[Color.blue.opacity(0.2), Color.red.opacity(0.2)]), startPoint: .topLeading, endPoint: .bottomTrailing)) } } #Preview { QuoteCardFancy(quote: "Stay calm and relax. Everything's gonna be alright.", author: "Unknown developer") } ``` --- ## 66. Product Card Basic Rectangle - **URL**: https://www.compotui.com/components/cards/product-card-basic-rectangle - **Category**: [Cards & Content Displays](https://www.compotui.com/components/cards) - **Identifier**: `productCardBasicRect` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: dashboard, onboarding, paywall - **Keywords**: product, card, basic, rectangle, e-commerce ### Description & Overview A versatile product card component for e-commerce applications, featuring a rectangular design with rounded corners, and a favorite button for user interaction. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import Foundation import SwiftUI struct ProductCardBasicRect: View { let productImage: Image let productName: String let productCategory: String let productPrice: Double @Binding var isFavorite: Bool var body: some View { VStack(alignment: .leading, spacing: 4) { image VStack(alignment: .leading, spacing: 2) { name category } price } } private var image: some View { productImage .resizable() .aspectRatio(contentMode: .fill) .frame(width: 160, height: 140) .clipped() .clipShape(.rect(cornerRadius: 15, style: .continuous)) .overlay(alignment: .topTrailing) { favoriteButton .offset(x: -10, y: 10) } } private var favoriteButton: some View { Button(action: { isFavorite.toggle() }) { /// You can download custom symbols used in this component: /// custom.heart.fill: https://drive.google.com/file/d/1FrubVKYkTqG61-iAA0LVv5MnjQKx1WUI/view?usp=sharing /// custom.heart: https://drive.google.com/file/d/1FbTd5rpydjMYCSktub2k9N7YeKVSDMVN/view?usp=sharing Image(isFavorite ? "custom.heart.fill" : "custom.heart") .font(.system(size: 20)) .fontWeight(.regular) .symbolRenderingMode(.multicolor) } .buttonStyle(PlainButtonStyle()) } private var name: some View { Text(productName) .font(.system(size: 15)) .fontWeight(.medium) .lineLimit(2) .padding(.top, 8) .foregroundStyle(.primary) } private var category: some View { Text(productCategory) .font(.system(size: 15)) .fontWeight(.light) .lineLimit(1) .foregroundStyle(.secondary) } private var price: some View { HStack { Text(productPrice, format: .currency(code: "USD")) .fontWeight(.medium) Text("night") .fontWeight(.light) .foregroundStyle(.secondary) } .font(.system(size: 14)) .padding(.bottom, 8) .foregroundStyle(.primary) } } struct UseProductCardBasicRect: View { @State private var isFavorite: Bool = false var body: some View { ProductCardBasicRect(productImage: Image("bellavista"), productName: "Bella Vista Hotel", productCategory: "Romantic", productPrice: 199.99, isFavorite: $isFavorite) .padding() } } #Preview { UseProductCardBasicRect() } ``` --- ## 67. Rating View (Half-Star Capable) - **URL**: https://www.compotui.com/components/cards/rating-view-half-star-capable - **Category**: [Cards & Content Displays](https://www.compotui.com/components/cards) - **Identifier**: `ratingView` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: dashboard, onboarding, paywall - **Keywords**: rating, stars, review, feedback ### Description & Overview A versatile rating view component for showing user ratings with stars. Perfect for reviews and feedback sections. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import Foundation import SwiftUI struct RatingView: View { let rating: Double var body: some View { HStack(alignment: .lastTextBaseline, spacing: 3) { ForEach(0..<5) { index in if rating >= Double(index + 1) { Image(systemName: "star.fill") .foregroundStyle(.yellow) } else if rating > Double(index) && rating < Double(index + 1) { Image(systemName: "star.leadinghalf.filled") .foregroundStyle(.yellow) } else { Image(systemName: "star") .foregroundStyle(.gray) } } Text(String(format: "%.1f", rating)) .padding(.leading, 5) .foregroundStyle(.secondary) } } } struct UseRatingView: View { var body: some View { RatingView(rating: 4.5) } } #Preview { UseRatingView() } ``` --- ## 68. Map with Circular Overlay - **URL**: https://www.compotui.com/components/cards/map-with-circular-overlay - **Category**: [Cards & Content Displays](https://www.compotui.com/components/cards) - **Identifier**: `mapWMapCircle` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: dashboard - **Keywords**: map, circle, location, coordinate ### Description & Overview A versatile map component that highlights a specific area with a circular overlay, perfect for showing regions of interest or activity zones. ### Recommended Use Cases - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI import MapKit struct MapWMapCircle: View { let coordinate: CLLocationCoordinate2D var body: some View { Map { MapCircle(center: coordinate, radius: 5000) .foregroundStyle(.red) .stroke(.white, lineWidth: 4) } .controlSize(.extraLarge) .mapControlVisibility(.hidden) .mapStyle(.hybrid) .frame(width: 160, height: 160) .clipShape(.rect(cornerRadius: 25, style: .continuous)) .shadow(color: .gray.opacity(0.5), radius: 5, x: 0, y: 2) } } struct UseMapWMapCircle: View { var body: some View { MapWMapCircle(coordinate: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194)) } } #Preview { UseMapWMapCircle() } ``` --- ## 69. Map with Polygon Overlay - **URL**: https://www.compotui.com/components/cards/map-with-polygon-overlay - **Category**: [Cards & Content Displays](https://www.compotui.com/components/cards) - **Identifier**: `mapWMapPolygon` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: dashboard - **Keywords**: map, polygon, coordinates, location ### Description & Overview A versatile map component that allows you to draw a polygon on the map using specified coordinates. Perfect for showcasing regions, routes, or any custom shapes on a map. ### Recommended Use Cases - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI import MapKit struct MapWMapPolygon: View { let coordinates: [CLLocationCoordinate2D] var body: some View { Map { MapPolygon(coordinates: coordinates) .foregroundStyle(.red) .stroke(.white, lineWidth: 2) } .controlSize(.extraLarge) .mapControlVisibility(.hidden) .mapStyle(.standard) .frame(width: 160, height: 160) .clipShape(.rect(cornerRadius: 25, style: .continuous)) .shadow(color: .gray.opacity(0.5), radius: 5, x: 0, y: 2) } } struct UseMapWMapPolygon: View { var body: some View { MapWMapPolygon(coordinates: [ CLLocationCoordinate2D(latitude: 40.0, longitude: -122.0), CLLocationCoordinate2D(latitude: 39.5, longitude: -121.0), CLLocationCoordinate2D(latitude: 38.5, longitude: -120.5), CLLocationCoordinate2D(latitude: 37.5, longitude: -120.7), CLLocationCoordinate2D(latitude: 37.0, longitude: -121.5), CLLocationCoordinate2D(latitude: 37.5, longitude: -122.3), CLLocationCoordinate2D(latitude: 38.5, longitude: -123.5), CLLocationCoordinate2D(latitude: 39.5, longitude: -123.0), CLLocationCoordinate2D(latitude: 40.0, longitude: -122.0) ]) } } #Preview { UseMapWMapPolygon() } ``` --- ## 70. Map with Polyline Overlay - **URL**: https://www.compotui.com/components/cards/map-with-polyline-overlay - **Category**: [Cards & Content Displays](https://www.compotui.com/components/cards) - **Identifier**: `mapWMapPolylines` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: dashboard - **Keywords**: map, polyline, coordinates, route, navigation ### Description & Overview A versatile map component that draws polylines based on provided coordinates. Ideal for navigation apps, travel logs, or any application that requires route visualization. ### Recommended Use Cases - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI import MapKit struct MapWMapPolylines: View { let coordinates: [CLLocationCoordinate2D] var body: some View { Map { MapPolyline(coordinates: coordinates) .stroke(.red, lineWidth: 5) .mapOverlayLevel(level: .aboveRoads) } .controlSize(.extraLarge) .mapControlVisibility(.hidden) .mapStyle(.standard) .frame(width: 160, height: 160) .clipShape(.rect(cornerRadius: 25, style: .continuous)) .shadow(color: .gray.opacity(0.5), radius: 5, x: 0, y: 2) } } struct UseMapWMapPolylines: View { var body: some View { MapWMapPolylines(coordinates: [ CLLocationCoordinate2D(latitude: 40.0, longitude: -122.0), CLLocationCoordinate2D(latitude: 39.5, longitude: -121.0), CLLocationCoordinate2D(latitude: 38.5, longitude: -120.5), CLLocationCoordinate2D(latitude: 37.5, longitude: -120.7), CLLocationCoordinate2D(latitude: 37.0, longitude: -121.5), CLLocationCoordinate2D(latitude: 37.5, longitude: -122.3), CLLocationCoordinate2D(latitude: 38.5, longitude: -123.5), CLLocationCoordinate2D(latitude: 39.5, longitude: -123.0), CLLocationCoordinate2D(latitude: 40.0, longitude: -122.0) ]) } } #Preview { UseMapWMapPolylines() } ``` --- ## 71. Settings List Row Label Basic - **URL**: https://www.compotui.com/components/settings/settings-list-row-label-basic - **Category**: [Settings, Lists & Rows](https://www.compotui.com/components/settings) - **Identifier**: `settingsListRowLabelBasic` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: settings - **Keywords**: settings ### Description & Overview `Settings List Row Label Basic` is a styled label component combining typography, icons, and visual indicators. ### Recommended Use Cases - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift Label { Text("Notifications") .foregroundStyle(.primary) } icon: { Image(systemName: "bell.badge.fill") .foregroundStyle(.white) .frame(width: 28, height: 28, alignment: .center) .background(.red, in: RoundedRectangle(cornerRadius: 7)) } ``` --- ## 72. Settings LabeledContent List Row - **URL**: https://www.compotui.com/components/settings/settings-labeledcontent-list-row - **Category**: [Settings, Lists & Rows](https://www.compotui.com/components/settings) - **Identifier**: `settingsLabeledContentListRow` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: settings - **Keywords**: labeledcontent, list, settings, label ### Description & Overview `Settings LabeledContent List Row` is a modular SwiftUI labeledcontent component designed for modern iOS apps. ### Recommended Use Cases - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift LabeledContent { Text("On") } label: { Label { Text("Notifications") .foregroundStyle(.primary) } icon: { Image(systemName: "bell.badge.fill") .foregroundStyle(.white) .frame(width: 28, height: 28, alignment: .center) .background(.red, in: RoundedRectangle(cornerRadius: 7)) } } .padding() ``` --- ## 73. Settings Row with Custom LabeledContent - **URL**: https://www.compotui.com/components/settings/settings-row-with-custom-labeledcontent - **Category**: [Settings, Lists & Rows](https://www.compotui.com/components/settings) - **Identifier**: `settingsRowWLabeledContent` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: settings ### Description & Overview `Settings Row with LabeledContent` is a modular SwiftUI row component designed for modern iOS apps. ### Recommended Use Cases - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift import SwiftUI struct SettingsRowWLabeledContent: View { var body: some View { Form { LabeledContent { Text("Router Name") .foregroundStyle(.secondary) .font(.system(size: 17, weight: .regular)) .frame(alignment: .trailing) } label: { SettingsLabelWIcon(labelTitle: "Wi-Fi", symbol: "wifi", fgColor: .white, bgColor: .blue) } } } } #Preview { SettingsRowWLabeledContent() } struct SettingsLabelWIcon: View { let labelTitle: String let symbol: String let fgColor: Color let bgColor: Color var body: some View { Label { Text(labelTitle) .foregroundStyle(.primary) } icon: { SettingsLabelIconWBackground(symbol: symbol, fgColor: fgColor, bgColor: bgColor) } .labelStyle(DefaultLabelStyle()) } } #Preview { SettingsLabelWIcon(labelTitle: "Wi-Fi", symbol: "wifi", fgColor: .white, bgColor: .blue) } struct SettingsLabelIconWBackground: View { let symbol: String let fgColor: Color let bgColor: Color var body: some View { Image(systemName: symbol) .font(.system(size: 14)) .foregroundStyle(fgColor) .frame(width: 28, height: 28) .background(bgColor, in: RoundedRectangle(cornerRadius: 7, style: .continuous)) } } #Preview { SettingsLabelIconWBackground(symbol: "wifi", fgColor: .white, bgColor: .blue) } ``` --- ## 74. LabeledContent with Formatters - **URL**: https://www.compotui.com/components/settings/labeledcontent-with-formatters - **Category**: [Settings, Lists & Rows](https://www.compotui.com/components/settings) - **Identifier**: `labeledContentWFormat` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings ### Description & Overview `LabeledContent with various units` is a modular SwiftUI labeledcontent component designed for modern iOS apps. ### Recommended Use Cases - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift import SwiftUI struct AgeFormatStyle: FormatStyle { typealias FormatInput = Int typealias FormatOutput = String func format(_ value: Int) -> String { if value == 1 { return "\\(value) year" } else { return "\\(value) years" } } } extension FormatStyle where Self == AgeFormatStyle { static var age: AgeFormatStyle { AgeFormatStyle() } } struct LabeledContentWFormat: View { let balance = 1000000 let byte = Measurement(value: 1024, unit: UnitInformationStorage.bytes) let age = 18 let height = Measurement(value: 180, unit: UnitLength.centimeters) // Centimeters, meters, kilometers, inches, feet, miles, etc. let weight = Measurement(value: 70, unit: UnitMass.kilograms) // Kilograms, grams, ounces, pounds, stones, etc. let area = Measurement(value: 1000, unit: UnitArea.acres) // SquareMeters, squareCentimeters, squareMillimeters, squareInches, squareFeet, squareYards, squareMiles, acres, hectares. let temperature = Measurement(value: 22, unit: UnitTemperature.celsius) // Celsius, Fahrenheit, Kelvin, etc. let speed = Measurement(value: 50, unit: UnitSpeed.milesPerHour) // MetersPerSecond, kilometersPerHour, milesPerHour, knots. let accelaration = Measurement(value: 8, unit: UnitAcceleration.metersPerSecondSquared) let time = Measurement(value: 2, unit: UnitDuration.hours) // Seconds, minutes, hours, etc. let volume = Measurement(value: 1, unit: UnitVolume.liters) // Milliliters, liters, cups, pints, gallons, etc. let angle = Measurement(value: 90, unit: UnitAngle.degrees) // Degrees, radians, gradians, etc. let pressure = Measurement(value: 1013.25, unit: UnitPressure.millibars) // Millibars, bars, pounds per square inch, etc. let energy = Measurement(value: 200, unit: UnitEnergy.kilocalories) // Joules, kilojoules, calories, kilocalories, etc. let electricCharge = Measurement(value: 1, unit: UnitElectricCharge.ampereHours) // Coulombs, ampere hours, etc. let frequency = Measurement(value: 1, unit: UnitFrequency.kilohertz) let illuminance = Measurement(value: 12, unit: UnitIlluminance.lux) let power = Measurement(value: 33, unit: UnitPower.kilowatts) let resistance = Measurement(value: 42, unit: UnitElectricResistance.ohms) let fuelEfficiency = Measurement(value: 100, unit: UnitFuelEfficiency.milesPerGallon) // LitersPer100Kilometers, milesPerImperialGallon, milesPerGallon. var body: some View { Form { LabeledContent("Balance", value: balance, format: .currency(code: "USD")) LabeledContent("Memory", value: byte, format: .byteCount(style: .memory)) LabeledContent("Age", value: age, format: .age) LabeledContent("Height", value: height, format: .measurement(width: .abbreviated)) LabeledContent("Weight", value: weight, format: .measurement(width: .abbreviated)) LabeledContent("Area", value: area, format: .measurement(width: .abbreviated)) LabeledContent("Temperature", value: temperature, format: .measurement(width: .abbreviated)) LabeledContent("Speed", value: speed, format: .measurement(width: .abbreviated)) LabeledContent("Accelaration", value: accelaration, format: .measurement(width: .abbreviated)) LabeledContent("Time", value: time, format: .measurement(width: .abbreviated)) LabeledContent("Volume", value: volume, format: .measurement(width: .abbreviated)) LabeledContent("Angle", value: angle, format: .measurement(width: .abbreviated)) LabeledContent("Pressure", value: pressure, format: .measurement(width: .abbreviated)) LabeledContent("Energy", value: energy, format: .measurement(width: .abbreviated)) LabeledContent("Electric Charge", value: electricCharge, format: .measurement(width: .abbreviated)) LabeledContent("Frequency", value: frequency, format: .measurement(width: .abbreviated)) LabeledContent("Illuminance", value: illuminance, format: .measurement(width: .abbreviated)) LabeledContent("Power", value: power, format: .measurement(width: .abbreviated)) LabeledContent("Resistance", value: resistance, format: .measurement(width: .abbreviated)) LabeledContent("Fuel Efficiency", value: fuelEfficiency, format: .measurement(width: .abbreviated)) } } } ``` --- ## 75. List Row Compact with Title, Subtitle & Detail - **URL**: https://www.compotui.com/components/settings/list-row-compact-with-title-subtitle-detail - **Category**: [Settings, Lists & Rows](https://www.compotui.com/components/settings) - **Identifier**: `listRowCompactTitleSubtitleDetail` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: settings, onboarding, paywall - **Keywords**: row, list ### Description & Overview `List Row Compact with Title, Subtitle and Detail` is a modular SwiftUI row component designed for modern iOS apps. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift HStack(alignment: .center, spacing: 4) { VStack(alignment: .leading, spacing: 4) { Text("Title") .font(.system(size: 17, weight: .medium)) .lineLimit(1) .multilineTextAlignment(.leading) Text("Subtitle") .font(.system(size: 13, weight: .regular)) .lineLimit(1) .multilineTextAlignment(.leading) } .padding(0) .frame(maxWidth: .infinity, minHeight: 44, maxHeight: 44, alignment: .leading) HStack(alignment: .center, spacing: 16) { Text("Detail") .lineLimit(1) .frame(width: 65, height: 16, alignment: .trailing) Image(systemName: "chevron.right") .foregroundStyle(.tertiary) } .font(.system(size: 17, weight: .medium)) .foregroundStyle(.secondary) .padding(.leading, 0) .padding(.trailing, 16) .padding(.vertical, 0) } .frame(maxWidth: .infinity, alignment: .center) .padding() ``` --- ## 76. Disclosure Group as FAQ - **URL**: https://www.compotui.com/components/settings/disclosure-group-as-faq - **Category**: [Settings, Lists & Rows](https://www.compotui.com/components/settings) - **Identifier**: `disclosureGroupAsFAQ` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, onboarding, paywall ### Description & Overview `Disclosure Group Basic` is a modular SwiftUI disclosuregroup component designed for modern iOS apps. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift DisclosureGroup("What is Compot?") { Text("Compot is a collection of reusable SwiftUI components and templates for fast development of mobile apps.") } ``` --- ## 77. FAQ List with Disclosure Groups - **URL**: https://www.compotui.com/components/settings/faq-list-with-disclosure-groups - **Category**: [Settings, Lists & Rows](https://www.compotui.com/components/settings) - **Identifier**: `faqListWDisclosureList` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: settings, onboarding, list ### Description & Overview `List of FAQs` is a modular SwiftUI list component designed for modern iOS apps. ### Recommended Use Cases - First-run onboarding flows and feature introductions - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift struct FAQDisclosureStyle: DisclosureGroupStyle { func makeBody(configuration: Configuration) -> some View { VStack { Button { withAnimation { configuration.isExpanded.toggle() } } label: { HStack(alignment: .firstTextBaseline) { configuration.label .fontWeight(.medium) Spacer() Image(systemName: configuration.isExpanded ? "minus" : "plus") .foregroundStyle(Color.accentColor) } .animation(.easeInOut, value: configuration.isExpanded) } .contentShape(Rectangle()) } .buttonStyle(.plain) if configuration.isExpanded { configuration.content .font(.body) } } } struct FAQListWDisclosureList: View { var body: some View { List { Section(header: Text("Frequently Asked Questions")) { DisclosureGroup("What is Compot?") { Text("Compot is great") } DisclosureGroup("What is Compot?") { Text("Compot is great") } DisclosureGroup("What is Compot?") { Text("Compot is great") } DisclosureGroup("What is Compot?") { Text("Compot is great") } DisclosureGroup("What is Compot?") { Text("Compot is great") } DisclosureGroup("What is Compot?") { Text("Compot is great") } DisclosureGroup("What is Compot?") { Text("Compot is great") } DisclosureGroup("What is Compot?") { Text("Compot is great") } DisclosureGroup("What is Compot?") { Text("Compot is great") } } .disclosureGroupStyle(FAQDisclosureStyle()) } .headerProminence(.increased) } } #Preview { FAQListWDisclosureList() } ``` --- ## 78. Footer Basic - **URL**: https://www.compotui.com/components/settings/footer-basic - **Category**: [Settings, Lists & Rows](https://www.compotui.com/components/settings) - **Identifier**: `footerBasic` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings - **Keywords**: footer, settings ### Description & Overview `Footer Basic` is a visual banner component for announcements, promotional messaging, or status alerts. ### Recommended Use Cases - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift VStack(alignment: .center, spacing: 8) { HStack(alignment: .center, spacing: 12) { Text("Developed with ♡ in Prague.") .font(.body) } HStack { Text("Compot") Text(UIApplication.appVersion ?? "") } .font(.footnote) } .foregroundColor(.secondary) .fontWeight(.light) .listRowBackground(Color.clear) .frame(maxWidth: .infinity, alignment: .center) // Implement this extension to get the app version extension UIApplication { static var appVersion: String? { return Bundle.main.object(forInfoDictionaryKey: "CFBundleShortVersionString") as? String } } ``` --- ## 79. Footer Fancy - **URL**: https://www.compotui.com/components/settings/footer-fancy - **Category**: [Settings, Lists & Rows](https://www.compotui.com/components/settings) - **Identifier**: `footerFancy` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free ### Description & Overview `Footer Fancy` is a standardized settings row or section view matching iOS system design patterns. ### Recommended Use Cases - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift import SwiftUI import UIKit // Make sure this extension is available in your project extension UIApplication { static var appVersion: String? { return Bundle.main.object(forInfoDictionaryKey: "CFBundleShortVersionString") as? String } } struct FooterFancy: View { var body: some View { VStack(alignment: .center, spacing: 4) { (Text("Developed with ") + Text(Image(systemName: "heart.fill")).foregroundColor(.red) + Text(" in Prague")) .font(.headline) .fontWeight(.bold) .foregroundColor(.secondary) .multilineTextAlignment(.center) .frame(maxWidth: .infinity, alignment: .center) Text("LukyLab s.r.o.") .font(.body) HStack { Text("Compot") Text(UIApplication.appVersion ?? "") } .font(.body) .frame(maxWidth: .infinity, alignment: .center) } .foregroundColor(.secondary) .listRowBackground(Color.clear) } } #Preview { FooterFancy() } ``` --- ## 80. Avatar Basic 62x62 - **URL**: https://www.compotui.com/components/avatars/avatar-basic-62x62 - **Category**: [Avatars & User Profiles](https://www.compotui.com/components/avatars) - **Identifier**: `avatarBasic62` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: settings, account - **Keywords**: avatar ### Description & Overview `Avatar Basic 62x62` is a modular SwiftUI image component designed for modern iOS apps. ### Recommended Use Cases - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift // Place image named "person" into Assets in your XCode project Image("person") .resizable() .scaledToFill() .frame(width: 62, height: 62) .clipped() .clipShape(Circle()) ``` --- ## 81. Contact Avatar 62x62 - **URL**: https://www.compotui.com/components/avatars/contact-avatar-62x62 - **Category**: [Avatars & User Profiles](https://www.compotui.com/components/avatars) - **Identifier**: `contactAvatar62` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: settings, onboarding, account ### Description & Overview `Contact Avatar 62x62` is a custom geometric graphic or decorative layout element. ### Recommended Use Cases - First-run onboarding flows and feature introductions - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift // Place image named "person" into Assets in your XCode project VStack(alignment: .center, spacing: 4) { Image("person") .resizable() .scaledToFill() .frame(width: 62, height: 62) .clipped() .clipShape(Circle()) .overlay { RoundedRectangle(cornerRadius: 4) .frame(width: 20, height: 20) .foregroundStyle(.green.gradient) .overlay { Image(systemName: "message.fill") .resizable() .foregroundStyle(.white) .frame(width: 12, height: 12) } .offset(x: 22, y: 22) } Text("Josh Maryway") .foregroundStyle(.primary) .font(.system(size: 11, weight: .regular)) .multilineTextAlignment(.center) .frame(maxWidth: 76) } ``` --- ## 82. Avatar Stack - **URL**: https://www.compotui.com/components/avatars/avatar-stack - **Category**: [Avatars & User Profiles](https://www.compotui.com/components/avatars) - **Identifier**: `avatarStack` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: dashboard, onboarding, account ### Description & Overview `Avatar Stack` is a custom geometric graphic or decorative layout element. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI struct UseAvatarStack: View { let userCount: Int = 21 var body: some View { HStack(alignment: .center, spacing: 8) { AvatarStack() HStack(alignment: .center, spacing: 0) { Image(systemName: "plus") .font(.footnote) Text("^[\\(userCount) More Happy \\("User")](inflect: true)") } .font(.body) .fontWeight(.semibold) .foregroundStyle(.secondary) .frame(maxWidth: .infinity, alignment: .leading) } .padding() .frame(maxWidth: .infinity, alignment: .leading) } } #Preview { UseAvatarStack() } struct AvatarStack: View { let avatarWidth: CGFloat = 32 let offset: CGFloat = 20 let numberOfAvatars = 5 var body: some View { // For person avatar images I'm using free images available on https://unsplash.com/ // Download sample avatar images here: // person1: https://drive.google.com/file/d/1mED11zHmbmC-i6CMusf2zHPf2k1LW9LE/view?usp=sharing // person2: https://drive.google.com/file/d/1hdPTQV11tEv0_nyTccNCpRnR_Em_j6PS/view?usp=sharing // person3: https://drive.google.com/file/d/1W88wgXYd2tuh3osd_vn2aF2hdymIdLv4/view?usp=sharing // person4: https://drive.google.com/file/d/1LC548ldgOEN6wxC0h4chMGphQR13okMj/view?usp=sharing // person5: https://drive.google.com/file/d/15PQ3FS8nSDRMy2PUU6GyZ8mIn8bME-1D/view?usp=sharing ZStack { ForEach(0.. Color { let red = Double.random(in: 0..<1, using: &generator) let green = Double.random(in: 0..<1, using: &generator) let blue = Double.random(in: 0..<1, using: &generator) return Color(red: red, green: green, blue: blue) } } ``` --- ## 87. Basic Gauge Component - **URL**: https://www.compotui.com/components/charts/basic-gauge-component - **Category**: [Charts & Gauges](https://www.compotui.com/components/charts) - **Identifier**: `gaugeBasic` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: dashboard - **Keywords**: gauge, progress, indicator ### Description & Overview A fundamental gauge component to represent progress or any other measurable value in your SwiftUI app. Simple yet highly effective. ### Recommended Use Cases - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI struct GaugeBasic: View { var label: String var value: Float var body: some View { Gauge(value: value) { Text(label) } } } struct UseGaugeBasic: View { var body: some View { GaugeBasic(label: "Progress", value: 0.4) .padding() } } #Preview { UseGaugeBasic() } ``` --- ## 88. Gauge with Values - **URL**: https://www.compotui.com/components/charts/gauge-with-values - **Category**: [Charts & Gauges](https://www.compotui.com/components/charts) - **Identifier**: `gaugeBasicWValues` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: dashboard - **Keywords**: gauge, progress, indicator, values, min-max ### Description & Overview A straightforward gauge component to visually represent progress or any metric within a specified range. ### Recommended Use Cases - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI struct UseGaugeBasicWValues: View { var body: some View { GaugeBasicWValues(labelText: "Progress", labelIcon: "target", current: 40, min: 0, max: 100) .padding() } } #Preview { UseGaugeBasicWValues() } struct GaugeBasicWValues: View { var labelText: String var labelIcon: String var current: Float var min: Float var max: Float var body: some View { Gauge(value: current, in: min...max) { Label(labelText, systemImage: labelIcon) } currentValueLabel: { Text("\\(Int(current))") } minimumValueLabel: { Text("\\(Int(min))") } maximumValueLabel: { Text("\\(Int(max))") } } } ``` --- ## 89. Circular Progress Gauge - **URL**: https://www.compotui.com/components/charts/circular-progress-gauge - **Category**: [Charts & Gauges](https://www.compotui.com/components/charts) - **Identifier**: `gaugeCircularProgressPercent` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: dashboard - **Keywords**: gauge, progress, circular, percent, swiftui, indicator ### Description & Overview A versatile and visually appealing circular progress gauge component, ideal for showing progress in percentage format. Customize the range, current value, label, and accent color to fit your app's needs. ### Recommended Use Cases - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI struct GaugeCircularProgressPercent: View { var min: Float var max: Float var current: Float var label: String var accentColor: Color var body: some View { Gauge(value: current, in: min...max) { Text(label) } currentValueLabel: { Text(current, format: .percent) } .gaugeStyle(.accessoryCircularCapacity) .tint(accentColor) } } struct UseGaugeCircularProgressPercent: View { var body: some View { VStack { GaugeCircularProgressPercent(min: 0.0, max: 1.0, current: 0.5, label: "Progress %", accentColor: .blue) } .padding() } } #Preview { UseGaugeCircularProgressPercent() } ``` --- ## 90. Labeled Speed Gauge Circular - **URL**: https://www.compotui.com/components/charts/labeled-speed-gauge-circular - **Category**: [Charts & Gauges](https://www.compotui.com/components/charts) - **Identifier**: `labeledSpeedGaugeCircular` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: dashboard - **Keywords**: gauge, speed, circular, label ### Description & Overview A dynamic and colorful circular speed gauge that can be used to represent various metrics like speed, progress, or other values. It comes with a customizable label and gradient tint for a modern look. ### Recommended Use Cases - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI struct LabeledSpeedGaugeCircular: View { var minSpeed: Float var maxSpeed: Float var currentSpeed: Float let gradient = Gradient(colors: [.green, .blue, .yellow, .orange, .red]) var label: String var body: some View { Gauge(value: currentSpeed, in: minSpeed...maxSpeed) { Text(label) .font(.system(size: 10, weight: .light)) } currentValueLabel: { Text("\\(Int(currentSpeed))") } .gaugeStyle(.accessoryCircular) .tint(gradient) } } struct UseLabeledSpeedGaugeCircular: View { var body: some View { VStack { LabeledSpeedGaugeCircular(minSpeed: 0.0, maxSpeed: 220.0, currentSpeed: 144.0, label: "MPH") } .padding() } } #Preview { UseLabeledSpeedGaugeCircular() } ``` --- ## 91. Labeled Gauge Accessory Circular - **URL**: https://www.compotui.com/components/charts/labeled-gauge-accessory-circular - **Category**: [Charts & Gauges](https://www.compotui.com/components/charts) - **Identifier**: `labeledGaugeAccessoryCircular` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: dashboard - **Keywords**: gauge, circular, accessory, labeled, speedometer, progress, indicator, meter ### Description & Overview A sleek and customizable circular gauge for displaying values, complete with labels and a gradient tint. Ideal for dashboards, monitoring tools, and any scenario where you need to visualize data in a compact, visually appealing way. ### Recommended Use Cases - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI struct UseLabeledGaugeAccessoryCircular: View { var body: some View { VStack { LabeledGaugeAccessoryCircular(minValue: 0.0, maxValue: 220.0, currentValue: 44) } .padding() } } #Preview { UseLabeledGaugeAccessoryCircular() } struct LabeledGaugeAccessoryCircular: View { var minValue: Float var maxValue: Float var currentValue: Float let gradient = Gradient(colors: [.green, .blue, .yellow, .orange, .red]) var body: some View { Gauge(value: currentValue, in: minValue...maxValue) { Text("MPH") } currentValueLabel: { Text("\\(Int(currentValue))") } minimumValueLabel: { Text("\\(Int(minValue))") .font(.system(size: 10, weight: .light)) .foregroundStyle(.secondary) } maximumValueLabel: { Text("\\(Int(maxValue))") .font(.system(size: 10, weight: .light)) .foregroundStyle(.secondary) } .gaugeStyle(.accessoryCircular) .tint(gradient) } } ``` --- ## 92. Icon with Background - **URL**: https://www.compotui.com/components/icons/icon-with-background - **Category**: [Icons & Badges](https://www.compotui.com/components/icons) - **Identifier**: `iconSettingsRow` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings - **Keywords**: icon, settings, symbol, bell, notification ### Description & Overview `Icon with background` is a modular SwiftUI image component designed for modern iOS apps. ### Recommended Use Cases - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift Image(systemName: "bell.badge.fill") .foregroundStyle(.white) .frame(width: 28, height: 28, alignment: .center) .background(.red, in: RoundedRectangle(cornerRadius: 7, style: .continuous)) ``` --- ## 93. Icon with Gradient Background - **URL**: https://www.compotui.com/components/icons/icon-with-gradient-background - **Category**: [Icons & Badges](https://www.compotui.com/components/icons) - **Identifier**: `labelIconWBackgroundGradient` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: settings, onboarding, account ### Description & Overview `Label Icon with background gradient` is a modular SwiftUI image component designed for modern iOS apps. ### Recommended Use Cases - First-run onboarding flows and feature introductions - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift import SwiftUI struct LabelIconWBackgroundGradient: View { let symbol: String let fgColor: Color let bgColor: Color var body: some View { Image(systemName: symbol) .font(.system(size: 14)) .foregroundStyle(fgColor) .frame(width: 28, height: 28) .background(bgColor.gradient, in: RoundedRectangle(cornerRadius: 7, style: .continuous)) } } #Preview { LabelIconWBackgroundGradient(symbol: "wifi", fgColor: .white, bgColor: .blue) } ``` --- ## 94. Icon with Stroke - **URL**: https://www.compotui.com/components/icons/icon-with-stroke - **Category**: [Icons & Badges](https://www.compotui.com/components/icons) - **Identifier**: `labelIconWStroke` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: settings, dashboard, account ### Description & Overview `Icon with stroke` is a styled label component combining typography, icons, and visual indicators. ### Recommended Use Cases - App settings, preferences, and account configuration screens - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI struct UseLabelIconWStroke: View { var body: some View { Label { Text("Scheme") } icon: { LabelIconWStroke(symbol: "moon") } .padding() } } #Preview { UseLabelIconWStroke() } struct LabelIconWStroke: View { let symbol: String var body: some View { Image(systemName: symbol) .font(.system(size: 14)) .foregroundStyle(.primary) .frame(width: 28, height: 28, alignment: .center) .overlay { RoundedRectangle(cornerRadius: 7, style: .continuous) .stroke(lineWidth: 1.0) } } } #Preview { LabelIconWStroke(symbol: "moon") } ``` --- ## 95. App Icon 60x60 - **URL**: https://www.compotui.com/components/icons/app-icon-60x60 - **Category**: [Icons & Badges](https://www.compotui.com/components/icons) - **Identifier**: `appIcon60` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, dashboard, onboarding, paywall ### Description & Overview `App Icon 60x60` is a custom geometric graphic or decorative layout element. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift RoundedRectangle(cornerRadius: 15, style: .continuous) .frame(width: 60, height: 60) .foregroundStyle(.green.gradient) .overlay { Image(systemName: "message.fill") .resizable() .foregroundStyle(.white) .frame(width: 40, height: 40) } ``` --- ## 96. App Icon 75x75 using AppIcon - **URL**: https://www.compotui.com/components/icons/app-icon-75x75-using-appicon - **Category**: [Icons & Badges](https://www.compotui.com/components/icons) - **Identifier**: `appIcon75UsingAppIcon` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, onboarding, account ### Description & Overview `App Icon using AppIcon 75x75` is a custom geometric graphic or decorative layout element. ### Recommended Use Cases - First-run onboarding flows and feature introductions - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift // Place image named "AppIcon" into Assets in your XCode project enum AppIconProvider { static func appIcon(in bundle: Bundle = .main) -> String? { guard let icons = bundle.object(forInfoDictionaryKey: "CFBundleIcons") as? [String: Any], let primaryIcon = icons["CFBundlePrimaryIcon"] as? [String: Any], let iconFiles = primaryIcon["CFBundleIconFiles"] as? [String], let iconFileName = iconFiles.last else { return nil } return iconFileName } } struct AppIcon: View { let appIcon: String var body: some View { if let appIcon = UIImage(named: appIcon) { Image(uiImage: appIcon) .resizable() .aspectRatio(contentMode: .fit) .clipShape(RoundedRectangle(cornerRadius: 15, style: .continuous)) } else { // Fallback icon or placeholder Image(systemName: "app.fill") .resizable() .aspectRatio(contentMode: .fit) .foregroundColor(.accentColor) .clipShape(RoundedRectangle(cornerRadius: 15, style: .continuous)) } } } struct AppIcon75UsingAppIcon: View { var body: some View { VStack { AppIcon(appIcon: AppIconProvider.appIcon() ?? "AppIcon") } .frame(width: 75, height: 75) .shadow(color: .gray.opacity(0.4), radius: 4) } } #Preview { AppIcon75UsingAppIcon() } ``` --- ## 97. Badge with Symbol & Palette Rendering - **URL**: https://www.compotui.com/components/icons/badge-with-symbol-palette-rendering - **Category**: [Icons & Badges](https://www.compotui.com/components/icons) - **Identifier**: `badgeWSymbolPaletteRendering` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, dashboard - **Keywords**: badge, symbol, palette, rendering ### Description & Overview A versatile badge component that combines a symbol and a title with customizable palette rendering for the symbol. ### Recommended Use Cases - App settings, preferences, and account configuration screens - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI struct UseBadgeWSymbolPaletteRendering: View { var body: some View { HStack { BadgeWSymbolPaletteRendering(title: "Weather", symbol: "cloud.sun.rain.fill", firstColor: .white, secondColor: .yellow, thirdColor: .blue) } } } #Preview { UseBadgeWSymbolPaletteRendering() } struct BadgeWSymbolPaletteRendering: View { var title: String var symbol: String var firstColor: Color var secondColor: Color var thirdColor: Color var body: some View { HStack(alignment: .center, spacing: 8) { Image(systemName: symbol) .font(.system(size: 20, weight: .regular)) .symbolRenderingMode(.palette) .foregroundStyle(firstColor, secondColor, thirdColor) Text(title) .foregroundStyle(.primary) } .font(.system(size: 15, weight: .medium)) .padding(.vertical, 8) .padding(.horizontal, 12) .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 12.0, style: .continuous)) } } ``` --- ## 98. Badge with Symbol & Linear Gradient - **URL**: https://www.compotui.com/components/icons/badge-with-symbol-linear-gradient - **Category**: [Icons & Badges](https://www.compotui.com/components/icons) - **Identifier**: `badgeWSymbolLinearGradient` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, dashboard, account - **Keywords**: badge, symbol, linear gradient, ui, swiftui, gradient ### Description & Overview A modern badge component that combines a symbol with a linear gradient, making it visually appealing for various use cases such as highlighting favorites, achievements, or any notable items. ### Recommended Use Cases - App settings, preferences, and account configuration screens - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI struct BadgeWSymbolLinearGradient: View { var title: String var symbol: String var symbolColors: [Color] var body: some View { VStack(alignment: .center, spacing: 8) { Image(systemName: symbol) .font(.title) .foregroundStyle(LinearGradient(colors: symbolColors, startPoint: .topLeading, endPoint: .bottomTrailing)) .shadow(color: .gray, radius: 15) Text(title) .font(.system(size: 15, weight: .medium)) .foregroundStyle(.primary) } .padding() .frame(width: 120, height: 90, alignment: .center) .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 10.0, style: .continuous)) } } struct UseBadgeWSymbolLinearGradient: View { var body: some View { HStack { BadgeWSymbolLinearGradient(title: "Favorites", symbol: "star.fill", symbolColors: [.yellow, .orange, .red]) } .padding() } } #Preview { UseBadgeWSymbolLinearGradient() } ``` --- ## 99. Link Row Settings - **URL**: https://www.compotui.com/components/links/link-row-settings - **Category**: [Links & Sharing](https://www.compotui.com/components/links) - **Identifier**: `linkRowSettings` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings - **Keywords**: link, row, settings ### Description & Overview `Link Row Settings` is a modular SwiftUI row component designed for modern iOS apps. ### Recommended Use Cases - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift import SwiftUI struct LinkRowSettings: View { var body: some View { Form { LabelRowLink(destinationUrl: "https://compotui.com", visibleUrl: "compotui.com", title: "Website", iconTitle: "globe", supportingIcon: "arrow.up.forward.app") } } } #Preview { LinkRowSettings() } struct LabelRowLink: View { let destinationUrl: String let visibleUrl: String? let title: String let iconTitle: String let supportingIcon: String? var body: some View { Link(destination: URL(string: destinationUrl)!, label: { HStack(alignment: .center) { Label(title, systemImage: iconTitle) Spacer() HStack(alignment: .center) { Text(visibleUrl ?? "") Image(systemName: supportingIcon ?? "") } .foregroundStyle(.secondary) } }) } } ``` --- ## 100. Link as Icon - **URL**: https://www.compotui.com/components/links/link-as-icon - **Category**: [Links & Sharing](https://www.compotui.com/components/links) - **Identifier**: `linkWView` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, dashboard - **Keywords**: link, icon ### Description & Overview `Link as icon` is a styled link component for in-app navigation, external URLs, or system deep-links. ### Recommended Use Cases - App settings, preferences, and account configuration screens - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift Link(destination: URL(string: "https://www.compotui.com")!, label: { Image(systemName: "arrow.up.right.square") .resizable() .scaledToFit() .frame(width: 64, height: 64) .foregroundStyle(.red) }) ``` --- ## 101. Link as Button - **URL**: https://www.compotui.com/components/links/link-as-button - **Category**: [Links & Sharing](https://www.compotui.com/components/links) - **Identifier**: `linkAsButton` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, onboarding, paywall ### Description & Overview `Link as button` is a styled link component for in-app navigation, external URLs, or system deep-links. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift import SwiftUI struct UseLinkAsButton: View { var body: some View { LinkAsButton(url: "https://www.compotui.com", systemSymbol: "globe", text: "Website") } } #Preview { UseLinkAsButton() } struct LinkAsButton: View { let url: String let systemSymbol: String let text: String var body: some View { Link(destination: URL(string: url)!, label: { HStack(spacing: 16) { Image(systemName: systemSymbol) Text(text) } .padding(.horizontal, 32) .padding(.vertical, 16) .font(.largeTitle) .foregroundColor(.white) .background( Capsule() .fill(Color.blue) ) }) } } ``` --- ## 102. Link as Markdown Text with Emoji - **URL**: https://www.compotui.com/components/links/link-as-markdown-text-with-emoji - **Category**: [Links & Sharing](https://www.compotui.com/components/links) - **Identifier**: `linkAsMarkdownTextWEmoji` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: settings, dashboard - **Keywords**: emoji markdown ### Description & Overview `Link as markdown text with emoji` is a styled link component for in-app navigation, external URLs, or system deep-links. ### Recommended Use Cases - App settings, preferences, and account configuration screens - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI struct UseLinkAsMarkdownTextWEmoji: View { var body: some View { LinkAsMarkdownTextWEmoji(emojiUnicode: 0x1F517, accentColor: .blue, url: "[Connect with us](https://www.compotui.com)") .padding() } } #Preview { UseLinkAsMarkdownTextWEmoji() } struct LinkAsMarkdownTextWEmoji: View { let emojiUnicode: Int let accentColor: Color let url: String func emojiConvertor(_ value: Int) -> String { guard let scalar = UnicodeScalar(value) else { return "?" } return String(Character(scalar)) } var body: some View { HStack(alignment: .center, spacing: 10) { ZStack(alignment: .center) { Circle() .foregroundStyle(accentColor.opacity(0.2)) Text(emojiConvertor(emojiUnicode)) .font(.title3) } .frame(width: 42, height: 42, alignment: .center) Text(.init(url)) } .padding() .frame(maxWidth: .infinity, alignment: .leading) } } ``` --- ## 103. App Store ShareLink - **URL**: https://www.compotui.com/components/links/app-store-sharelink - **Category**: [Links & Sharing](https://www.compotui.com/components/links) - **Identifier**: `shareLinkShareAppStoreLink` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: settings, dashboard ### Description & Overview `ShareLink to share link of the app on the App Store` is a styled link component for in-app navigation, external URLs, or system deep-links. ### Recommended Use Cases - App settings, preferences, and account configuration screens - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import Foundation import SwiftUI struct ShareLinkShareAppStoreLink: View { let appStoreLink: String let labelText: String var body: some View { ShareLink(item: URL(string: appStoreLink)!) { Label { Text(labelText) .font(.body) } icon: { Image(uiImage: UIImage(named: AppIconProvider.appIcon()) ?? UIImage()) .resizable() .scaledToFit() .frame(width: 26) .clipShape(.rect(cornerRadius: 8)) } } } } struct UseShareLinkShareAppStoreLink: View { var body: some View { ShareLinkShareAppStoreLink(appStoreLink: "https://apps.apple.com/cz/app/swiftui-components-compot/id6471916279", labelText: "Share Compot with Friends") } } #Preview { UseShareLinkShareAppStoreLink() } enum AppIconProvider { static func appIcon(in bundle: Bundle = .main) -> String { guard let icons = bundle.object(forInfoDictionaryKey: "CFBundleIcons") as? [String: Any], let primaryIcon = icons["CFBundlePrimaryIcon"] as? [String: Any], let iconFiles = primaryIcon["CFBundleIconFiles"] as? [String], let iconFileName = iconFiles.last else { fatalError("Couldn't find icon in the bundle.") } return iconFileName } } ``` --- ## 104. Promo Banner as NavigationLink (Narrow) - **URL**: https://www.compotui.com/components/navigation/promo-banner-as-navigationlink-narrow - **Category**: [Navigation Links & Banners](https://www.compotui.com/components/navigation) - **Identifier**: `promoBannerNavLinkNarrow` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: settings, onboarding, paywall ### Description & Overview `Promo Banner as NavigationLink Narrow` is a visual banner component for announcements, promotional messaging, or status alerts. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift import SwiftUI struct PromoBannerNavLinkNarrow: View { var body: some View { NavigationLink { // Destination View } label: { HStack(alignment: .center) { Image(systemName: "fireworks") .symbolRenderingMode(.palette) .foregroundStyle(.red, .green) ViewThatFits { Text("Introducing Compot") Text("Compot") } .fontWeight(.semibold) Image(systemName: "circle.fill") .font(.system(size: 3)) ViewThatFits { Text("Components & Templates for modern SwiftUI development") Text("SwiftUI Components & Templates") Text("SwiftUI Components") } .lineLimit(1) .fontWeight(.regular) Spacer() Image(systemName: "chevron.right") .font(.system(size: 10)) .foregroundStyle(.secondary) } .padding(.vertical, 8) .padding(.horizontal, 16) .font(.system(size: 13)) .foregroundStyle(.primary) .background { RoundedRectangle(cornerRadius: 25.0, style: .continuous) .strokeBorder(Color.gray.opacity(0.4), lineWidth: 1) .foregroundStyle(.clear) } } .padding() .buttonStyle(PlainButtonStyle()) .frame(maxWidth: 620, alignment: .leading) } } #Preview { PromoBannerNavLinkNarrow() } ``` --- ## 105. Banner NavigationLink with Symbol - **URL**: https://www.compotui.com/components/navigation/banner-navigationlink-with-symbol - **Category**: [Navigation Links & Banners](https://www.compotui.com/components/navigation) - **Identifier**: `bannerNavLinkWSymbol` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: settings, onboarding, dashboard ### Description & Overview `Banner as NavLink with symbol` is a visual banner component for announcements, promotional messaging, or status alerts. ### Recommended Use Cases - First-run onboarding flows and feature introductions - App settings, preferences, and account configuration screens - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI struct BannerNavLinkWSymbol: View { var body: some View { VStack { NavigationLink { } label: { HStack(alignment: .center) { Image(systemName: "heart.fill") .font(.system(size: 20)) .foregroundStyle(.white) .padding() .background(.red.gradient, in: Rectangle()) Text("Favorites") .font(.system(size: 17, weight: .semibold)) .foregroundStyle(.primary) Spacer() Image(systemName: "chevron.right") .font(.system(size: 15)) .foregroundStyle(.secondary) .padding(.trailing, 8) } .frame(maxWidth: 450, alignment: .center) } .buttonStyle(PlainButtonStyle()) .background(.thinMaterial) .clipShape(.rect(cornerRadius: 8)) } .padding() } } #Preview { BannerNavLinkWSymbol() } ``` --- ## 106. Banner NavigationLink with Person Image - **URL**: https://www.compotui.com/components/navigation/banner-navigationlink-with-person-image - **Category**: [Navigation Links & Banners](https://www.compotui.com/components/navigation) - **Identifier**: `bannerNavLinkWImage` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: settings, onboarding, dashboard ### Description & Overview `Banner as NavLink with person image` is a visual banner component for announcements, promotional messaging, or status alerts. ### Recommended Use Cases - First-run onboarding flows and feature introductions - App settings, preferences, and account configuration screens - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI struct BannerNavLinkWImage: View { var body: some View { VStack { NavigationLink { } label: { HStack(alignment: .center) { Image("person") .resizable() .scaledToFill() .frame(width: 64, height: 64) VStack(alignment: .leading) { Text("Josh Merryway") .lineLimit(1) Text("josh@merryway.com") .lineLimit(1) .font(.system(size: 15)) } .font(.system(size: 17, weight: .semibold)) .foregroundStyle(.primary) //.padding(.leading, 10) Spacer() Image(systemName: "chevron.right") .font(.system(size: 15)) .foregroundStyle(.secondary) .padding(.trailing, 8) } .frame(maxWidth: 450, alignment: .center) } .buttonStyle(PlainButtonStyle()) .background(.thinMaterial) .clipShape(.rect(cornerRadius: 8)) } .padding() } } #Preview { BannerNavLinkWImage() } ``` --- ## 107. Basic Welcome Screen - **URL**: https://www.compotui.com/components/onboarding/basic-welcome-screen - **Category**: [Onboarding & Welcome Screens](https://www.compotui.com/components/onboarding) - **Identifier**: `basicWelcomeScreen` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: onboarding - **Keywords**: onboarding, welcome ### Description & Overview `Basic Welcome Screen` is a modular SwiftUI screen component designed for modern iOS apps. ### Recommended Use Cases - First-run onboarding flows and feature introductions ### SwiftUI Code ```swift import SwiftUI struct BasicWelcomeScreen: View { var body: some View { NavigationStack { VStack { Image(uiImage: UIImage(named: AppIconProvider.appIcon()) ?? UIImage()) .resizable() .scaledToFit() .frame(width: 120, height: 120) .clipShape(.rect(cornerRadius: 22)) .shadow(color: .gray.opacity(0.6), radius: 1) .padding(.bottom) VStack(alignment: .center, spacing: 8) { Text("Welcome to Compot") .font(.title) .fontWeight(.semibold) .foregroundStyle(.primary) .frame(maxWidth: 350) Text("The sweetest app for busy SwiftUI developers.") .font(.title3) .fontWeight(.regular) .foregroundStyle(.primary) .multilineTextAlignment(.center) .frame(maxWidth: 250) } } .padding() } .safeAreaInset(edge: .bottom) { Button { print("get started") } label: { HStack(spacing: 8) { Text("Get Started") Image(systemName: "arrow.right") } .padding() .font(.headline) .foregroundStyle(.white) .frame(alignment: .center) } .frame(maxWidth: 450) .background(.tint) .clipShape(Capsule()) .padding() .help("Accessibility hint, eg. Button to start to use the app.") } } } #Preview { BasicWelcomeScreen() } enum AppIconProvider { static func appIcon(in bundle: Bundle = .main) -> String { guard let icons = bundle.object(forInfoDictionaryKey: "CFBundleIcons") as? [String: Any], let primaryIcon = icons["CFBundlePrimaryIcon"] as? [String: Any], let iconFiles = primaryIcon["CFBundleIconFiles"] as? [String], let iconFileName = iconFiles.last else { fatalError("Couldn't find icon in the bundle.") } return iconFileName } } ``` --- ## 108. Onboarding TabView Basic - **URL**: https://www.compotui.com/components/onboarding/onboarding-tabview-basic - **Category**: [Onboarding & Welcome Screens](https://www.compotui.com/components/onboarding) - **Identifier**: `onboardingTabViewBasic` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: onboarding ### Description & Overview `Onboarding TabView Basic` is a modular SwiftUI screen component designed for modern iOS apps. ### Recommended Use Cases - First-run onboarding flows and feature introductions ### SwiftUI Code ```swift import SwiftUI struct OnboardingTabViewBasic: View { let blueish: Color = Color(red: 0.42, green: 0.4, blue: 0.84) let pinkish: Color = Color(red: 0.92, green: 0.43, blue: 0.43) var body: some View { TabView { OnboardingTabViewBasicSlide(iconName: "swift", title: "SwiftUI Components", subtitle: "Choose from 100+ components and templates.") OnboardingTabViewBasicSlide(iconName: "doc.on.doc", title: "Copy & Share", subtitle: "Second slide subtitle") OnboardingTabViewBasicSlide(iconName: "globe", title: "Third slide title", subtitle: "Third slide subtitle") } .background(Gradient(colors: [blueish, pinkish])) .tabViewStyle(.page) .safeAreaInset(edge: .bottom) { OnboardingTabViewBasicButton(label: "Get Started") { print("get started") } } } } #Preview { OnboardingTabViewBasic() } struct OnboardingTabViewBasicSlide: View { let iconName: String let title: String let subtitle: String var body: some View { VStack(alignment: .center) { Image(systemName: iconName) .resizable() .scaledToFit() .frame(width: 120, height: 120) .clipShape(.rect(cornerRadius: 22)) .shadow(color: .gray.opacity(0.6), radius: 1) .padding(.bottom) VStack(alignment: .center, spacing: 8) { Text(title) .font(.title) .fontWeight(.semibold) .foregroundStyle(.primary) .frame(maxWidth: 350) Text(subtitle) .font(.title3) .fontWeight(.regular) .foregroundStyle(.primary) .multilineTextAlignment(.center) .frame(maxWidth: 350) } } .padding() } } struct OnboardingTabViewBasicButton: View { let label: String let action: () -> Void var body: some View { Button { action() } label: { HStack(spacing: 8) { Text(label) } .padding() .font(.headline) .foregroundStyle(.white) .frame(alignment: .center) } .frame(maxWidth: 450) .background(.tint) .clipShape(Capsule()) .padding() .help("Accessibility hint, eg. Button to start to use the app.") } } ``` --- ## 109. Sports Car App Welcome Screen - **URL**: https://www.compotui.com/components/onboarding/sports-car-app-welcome-screen - **Category**: [Onboarding & Welcome Screens](https://www.compotui.com/components/onboarding) - **Identifier**: `sportCarAppWelcomeScreen` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: onboarding ### Description & Overview `Sport Car App Welcome Screen` is a modular SwiftUI screen component designed for modern iOS apps. ### Recommended Use Cases - First-run onboarding flows and feature introductions ### SwiftUI Code ```swift // You can ownload the car image here: https://drive.google.com/file/d/1GVdHPmkFmwQ1-DAh2k6kUv1HVDk0toIA/view?usp=sharing import SwiftUI struct SportCarAppWelcomeScreen: View { let carColor: Color = Color(red: 0.88, green: 0.0, blue: 0.1) var body: some View { VStack { VStack(alignment: .leading) { Text("Unleash the speed") .foregroundStyle(.white) .font(.system(size: 32, weight: .heavy)) Text("Explore the new driving experience") .foregroundStyle(.gray) .font(.system(size: 32, weight: .heavy)) } .padding(.top, 96) .padding(.horizontal) .frame(maxWidth: .infinity, alignment: .leading) Spacer() Button { print("tap") } label: { Text("Get Started") .font(.system(size: 17, weight: .medium)) .textCase(.uppercase) .padding(.vertical) .padding(.horizontal, 24) .font(.system(size: 17, weight: .regular)) .frame(maxWidth: 450, alignment: .center) .frame(height: 50) .background( RoundedRectangle(cornerRadius: 25, style: .continuous) .stroke(carColor, lineWidth: 2) .background(Color.clear) ) } .padding() .foregroundStyle(carColor) .buttonStyle(PlainButtonStyle()) .contentShape(RoundedRectangle(cornerRadius: 25.0)) .padding(.bottom, 24) } .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center) .background { Image("sportcar") .resizable() .scaledToFill() .clipped() .ignoresSafeArea() } } } #Preview { SportCarAppWelcomeScreen() } ``` --- ## 110. Benefit Row Basic - **URL**: https://www.compotui.com/components/paywalls/benefit-row-basic - **Category**: [Paywalls & Subscriptions](https://www.compotui.com/components/paywalls) - **Identifier**: `proBenefitRowBasic` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, onboarding, paywall ### Description & Overview `Benefit Row Basic` is a modular SwiftUI row component designed for modern iOS apps. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift HStack(spacing: 12) { Image(systemName: "checkmark.circle.fill") .foregroundStyle(Color.accentColor) .symbolRenderingMode(.multicolor) .font(.system(size: 22, weight: .medium)) Text("Benefit description") .multilineTextAlignment(.leading) } .font(.system(size: 17, weight: .medium)) .frame(alignment: .leading) ``` --- ## 111. Pro Benefits VStack with Bounce - **URL**: https://www.compotui.com/components/paywalls/pro-benefits-vstack-with-bounce - **Category**: [Paywalls & Subscriptions](https://www.compotui.com/components/paywalls) - **Identifier**: `proBenefitsVStackWBounce` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: settings, onboarding, paywall - **Keywords**: paywall, bounce, effect ### Description & Overview `Pro Benefits VStack with Bounce` is a modular SwiftUI row component designed for modern iOS apps. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift import SwiftUI struct ProBenefitsWBounce: DynamicViewComponent { @State private var bounce1: Bool = false @State private var bounce2: Bool = false @State private var bounce3: Bool = false var body: some View { VStack(alignment: .leading, spacing: 10) { BenefitRowWBounce(effect: bounce1, benefit: "Unlimited content") BenefitRowWBounce(effect: bounce2, benefit: "Unlimited features") BenefitRowWBounce(effect: bounce3, benefit: "No Ads") } .padding() .frame(maxWidth: 450, alignment: .leading) .onAppear { bounce1.toggle() DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) { bounce2.toggle() } DispatchQueue.main.asyncAfter(deadline: .now() + 1) { bounce3.toggle() } } } } private struct BenefitRowWBounce: View { let effect: Bool let benefit: String var body: some View { HStack(spacing: 12) { Image(systemName: "checkmark.circle.fill") .symbolRenderingMode(.multicolor) .symbolEffect(.bounce, value: effect) .font(.system(size: 22, weight: .medium)) Text(benefit) .multilineTextAlignment(.leading) } .font(.system(size: 17, weight: .medium)) .frame(alignment: .leading) } } #Preview { ProBenefitsWBounce() } ``` --- ## 112. Subscription Plan Choice with Checkmark - **URL**: https://www.compotui.com/components/paywalls/subscription-plan-choice-with-checkmark - **Category**: [Paywalls & Subscriptions](https://www.compotui.com/components/paywalls) - **Identifier**: `subscriptionPlanChoiceCheckmarkSimple` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: settings, onboarding, paywall ### Description & Overview `Subscription plan banner with checkmark` is a visual banner component for announcements, promotional messaging, or status alerts. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Paywalls, upgrade prompts, and subscription tiers - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift import SwiftUI struct SubscriptionPlanBanner: View { @State private var isSelected: Bool = false let planTitle: String = "Compot Pro Annual Subscription" let planPrice: String = "$9.99/year, then $29.99/year" let planDescription: String = "Unlock all content and unlimited features." var body: some View { VStack(alignment: .leading, spacing: 4) { HStack { Text(planTitle) Spacer() Image(systemName: isSelected ? "checkmark.circle.fill" : "circle") .foregroundStyle(isSelected ? Color.accentColor : Color.gray) .symbolRenderingMode(.multicolor) } .font(.system(size: 17, weight: .bold)) Text(planPrice) .font(.system(size: 13, weight: .regular)) Divider() .padding(.vertical, 4) Text(planDescription) .font(.system(size: 13, weight: .regular)) } .padding() .frame(maxWidth: .infinity, alignment: .leading) .background { RoundedRectangle(cornerRadius: 15.0, style: .continuous) .fill(.ultraThinMaterial) .stroke(isSelected ? Color.accentColor : Color.gray, lineWidth: 2.0) } .onTapGesture { isSelected.toggle() } } } #Preview { SubscriptionPlanBanner() } ``` --- ## 113. Image with Text Overlay - **URL**: https://www.compotui.com/components/images/image-with-text-overlay - **Category**: [Images & Effects](https://www.compotui.com/components/images) - **Identifier**: `imageWTextOverlay` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: dashboard - **Keywords**: emoji ### Description & Overview `Image with Text Overlay` is a modular SwiftUI image component designed for modern iOS apps. ### Recommended Use Cases - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift Image(systemName: "circle") .font(.system(size: 50, weight: .thin)) .foregroundStyle(.secondary) .overlay(Text("❤️"), alignment: .center) ``` --- ## 114. Image with Custom Mask - **URL**: https://www.compotui.com/components/images/image-with-custom-mask - **Category**: [Images & Effects](https://www.compotui.com/components/images) - **Identifier**: `imageWMask` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, account ### Description & Overview `Image with mask` is a modular SwiftUI image component designed for modern iOS apps. ### Recommended Use Cases - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift import SwiftUI // I'm using free images from: https://unsplash.com/ // You can download the image here: https://drive.google.com/file/d/1xfhSIbV6OSMB9u_lM6l_hsPzzaAL9MME/view?usp=sharing struct ImageWMask: View { var body: some View { Image("fiona") .resizable() .scaledToFit() .mask { Image(systemName: "seal.fill") .resizable() .scaledToFit() } .frame(width: 100) .shadow(color: .gray.opacity(0.6), radius: 4) } } #Preview { ImageWMask() } ``` --- ## 115. Image with Scale Effect Animation - **URL**: https://www.compotui.com/components/images/image-with-scale-effect-animation - **Category**: [Images & Effects](https://www.compotui.com/components/images) - **Identifier**: `imageWScaleEffectAnimation` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: settings, onboarding, account, dashboard ### Description & Overview `Image with scale effect` is a modular SwiftUI image component designed for modern iOS apps. ### Recommended Use Cases - First-run onboarding flows and feature introductions - App settings, preferences, and account configuration screens - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI // Download the image here: https://drive.google.com/file/d/1zxSawoJvXA333ihnknEB2wwuDiwv2d-u/view?usp=sharing struct ImageWScaleEffectAnimation: View { @State private var isAnimating: Bool = false var body: some View { Image("oldmap") .resizable() .scaledToFill() .scaleEffect(isAnimating ? 5.0 : 1) .frame(width: 100, height: 100) .clipped() .clipShape(RoundedRectangle(cornerRadius: 25.0, style: .continuous)) .onAppear() { withAnimation(.easeOut(duration: 0.5)) { isAnimating = true } } } } #Preview { ImageWScaleEffectAnimation() } ``` --- ## 116. Label Basic with Icon - **URL**: https://www.compotui.com/components/labels/label-basic-with-icon - **Category**: [Labels](https://www.compotui.com/components/labels) - **Identifier**: `labelBasicWIcon` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings - **Keywords**: label, free, icon ### Description & Overview `Label Basic with Icon` is a styled label component combining typography, icons, and visual indicators. ### Recommended Use Cases - App settings, preferences, and account configuration screens ### SwiftUI Code ```swift Label("Library", systemImage: "books.vertical") .labelStyle(.titleAndIcon) .font(.title3) .padding() .background(.thinMaterial) .clipShape(.rect(cornerRadius: 8)) .shadow(color: .gray.opacity(0.3), radius: 1) ``` --- ## 117. Label Bordered Gradient - **URL**: https://www.compotui.com/components/labels/label-bordered-gradient - **Category**: [Labels](https://www.compotui.com/components/labels) - **Identifier**: `labelBorderedGradient` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: dashboard ### Description & Overview `Label Bordered Gradient` is a styled label component combining typography, icons, and visual indicators. ### Recommended Use Cases - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift Label("Featured", systemImage: "star") .labelStyle(GradientBorderedLabelStyle()) .background(.background.secondary) // Implement this custom style struct GradientBorderedLabelStyle: LabelStyle { func makeBody(configuration: Configuration) -> some View { Label(configuration) .labelStyle(.titleOnly) .font(.system(size: 17, weight: .medium)) .padding(.vertical, 8) .padding(.horizontal, 16) .border(LinearGradient(colors: [.red, .purple, .blue], startPoint: .topLeading, endPoint: .bottomTrailing), width: 2) } } ``` --- ## 118. Label with Text Icon - **URL**: https://www.compotui.com/components/labels/label-with-text-icon - **Category**: [Labels](https://www.compotui.com/components/labels) - **Identifier**: `labelWCustomTextIcon` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: dashboard, settings - **Keywords**: text, icon ### Description & Overview `Label with Text Icon` is a styled label component combining typography, icons, and visual indicators. ### Recommended Use Cases - App settings, preferences, and account configuration screens - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift Label { Text("Rating") .foregroundStyle(.secondary) } icon: { Image(systemName: "star.fill") .foregroundStyle(.yellow) } ``` --- ## 119. Label with Person Initials - **URL**: https://www.compotui.com/components/labels/label-with-person-initials - **Category**: [Labels](https://www.compotui.com/components/labels) - **Identifier**: `labelWPersonInitials` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: settings, account, dashboard ### Description & Overview `Label with person initials` is a styled label component combining typography, icons, and visual indicators. ### Recommended Use Cases - App settings, preferences, and account configuration screens - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI struct UseLabelWPersonInitials: View { var body: some View { LabelWPersonInitials(personName: PersonNameComponents(givenName: "Josh", familyName: "Merryway"), personJob: "CEO") } } #Preview { UseLabelWPersonInitials() } struct LabelWPersonInitials: View { let personName: PersonNameComponents let personJob: String var body: some View { Label { Text(personName, format: .name(style: .medium)) .font(.body) .fontWeight(.regular) .foregroundColor(.primary) Text(personJob) .font(.subheadline) .foregroundColor(.secondary) } icon: { Circle() .fill(.blue.gradient.opacity(0.5)) .frame(width: 44, height: 44, alignment: .center) .overlay(Text(personName, format: .name(style: .abbreviated))) } } } #Preview { LabelWPersonInitials(personName: PersonNameComponents(givenName: "Josh", familyName: "Merryway"), personJob: "CEO") } ``` --- ## 120. Multicolor Symbol Basic - **URL**: https://www.compotui.com/components/sf-symbols/multicolor-symbol-basic - **Category**: [SF Symbols & Animations](https://www.compotui.com/components/sf-symbols) - **Identifier**: `multicolorSymbolBasic` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: onboarding, dashboard - **Keywords**: symbol, image ### Description & Overview `Multicolor Symbol Basic` is an enhanced SF Symbol layout with multi-color and variable rendering effects. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift Image(systemName: "rainbow") .font(.system(size: 64)) .symbolRenderingMode(.multicolor) ``` --- ## 121. Multicolor Symbol Variable - **URL**: https://www.compotui.com/components/sf-symbols/multicolor-symbol-variable - **Category**: [SF Symbols & Animations](https://www.compotui.com/components/sf-symbols) - **Identifier**: `multicolorSymbolVariable` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: onboarding, dashboard - **Keywords**: symbol, image ### Description & Overview `Multicolor Symbol Variable` is an enhanced SF Symbol layout with multi-color and variable rendering effects. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift Image(systemName: "rainbow") .font(.system(size: 64)) .symbolRenderingMode(.multicolor) .symbolEffect(.variableColor) ``` --- ## 122. Multicolor Symbol Variable Iterative - **URL**: https://www.compotui.com/components/sf-symbols/multicolor-symbol-variable-iterative - **Category**: [SF Symbols & Animations](https://www.compotui.com/components/sf-symbols) - **Identifier**: `multicolorSymbolVariableIterative` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: onboarding, dashboard - **Keywords**: symbol, image ### Description & Overview `Multicolor Symbol Variable Iterative` is an enhanced SF Symbol layout with multi-color and variable rendering effects. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift Image(systemName: "rainbow") .font(.system(size: 64)) .symbolRenderingMode(.multicolor) .symbolEffect(.variableColor.iterative) ``` --- ## 123. Multicolor Symbol Variable Reversing - **URL**: https://www.compotui.com/components/sf-symbols/multicolor-symbol-variable-reversing - **Category**: [SF Symbols & Animations](https://www.compotui.com/components/sf-symbols) - **Identifier**: `multicolorSymbolVariableReversing` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: onboarding, dashboard - **Keywords**: symbol, image ### Description & Overview `Multicolor Symbol Variable Iterative Reversing` is an enhanced SF Symbol layout with multi-color and variable rendering effects. ### Recommended Use Cases - First-run onboarding flows and feature introductions - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift Image(systemName: "rainbow") .font(.system(size: 64)) .symbolRenderingMode(.multicolor) .symbolEffect(.variableColor.hideInactiveLayers.reversing) ``` --- ## 124. Text Editor Simple - **URL**: https://www.compotui.com/components/inputs/text-editor-simple - **Category**: [Inputs & Text Editors](https://www.compotui.com/components/inputs) - **Identifier**: `textEditorSimple` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: dashboard ### Description & Overview `Text Editor Simple` is an interactive input and form control component built with native SwiftUI controls. ### Recommended Use Cases - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI struct TextEditorSimple: View { @State private var text: String = "" @FocusState private var focusText: Bool var body: some View { VStack(alignment: .leading, spacing: 4) { Text("Text Editor") .font(.callout) .foregroundStyle(.secondary) .font(.system(size: 15, weight: .regular, design: .default)) TextEditor(text: $text) .focused($focusText) .autocorrectionDisabled() .textSelection(.enabled) .padding(.horizontal, 8) .padding(.vertical, 4) .foregroundStyle(.primary) .font(.system(size: 15, weight: .regular, design: .default)) .lineSpacing(2) .overlay(RoundedRectangle(cornerRadius: 8).stroke(Color(uiColor: .tertiarySystemFill), lineWidth: 1.5)) } .padding() .frame(maxWidth: .infinity, maxHeight: 150) .toolbar { ToolbarItemGroup(placement: .keyboard) { Spacer() Button("Hide keyboard") { focusText = false } } } } } #Preview { TextEditorSimple() } ``` --- ## 125. TextEditor with Placeholder & Custom Background - **URL**: https://www.compotui.com/components/inputs/texteditor-with-placeholder-custom-background - **Category**: [Inputs & Text Editors](https://www.compotui.com/components/inputs) - **Identifier**: `textEditorWPlaceholderCustomBackground` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: dashboard ### Description & Overview `TextEditor with placeholder text and custom background` is an interactive input and form control component built with native SwiftUI controls. ### Recommended Use Cases - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI struct TextEditorWPlaceholderCustomBackground: View { @State private var text: String = "" @FocusState private var isFocused: Bool var body: some View { VStack(alignment: .leading, spacing: 4) { Text("Description") .font(.system(size: 13, weight: .light)) .foregroundStyle(.secondary) .textCase(.uppercase) .padding(.leading, 12) ZStack { if text.isEmpty { HStack { Text("Placeholder") .font(.body) .foregroundStyle(Color(UIColor.placeholderText)) } .padding(.horizontal) .padding(.vertical) .frame(maxWidth: .infinity, maxHeight: 120, alignment: .topLeading) } TextEditor(text: $text) .font(.body) .padding(.vertical, 8) .padding(.horizontal, 12) .frame(maxWidth: .infinity) .frame(height: 120) .focused($isFocused) .scrollContentBackground(.hidden) .background(.blue.opacity(0.2), in: RoundedRectangle(cornerRadius: 8.0)) } Text("You've written ^[\\(text.count) \("character")](inflect: true).") .font(.system(size: 12, weight: .light)) .fontWeight(.light) .foregroundStyle(.secondary) .frame(maxWidth: .infinity, alignment: .trailing) } .padding() .toolbar { ToolbarItemGroup(placement: .keyboard) { Spacer() Button("Done") { isFocused = false } } } } } #Preview { TextEditorWPlaceholderCustomBackground() } ``` --- ## 126. Message Bubble Basic - **URL**: https://www.compotui.com/components/chat/message-bubble-basic - **Category**: [Shapes, Chat & Real-Time](https://www.compotui.com/components/chat) - **Identifier**: `messageBubbleBasic` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: dashboard - **Keywords**: message, bubble, chat, text ### Description & Overview A versatile message bubble component designed for chat interfaces, supporting both user and recipient messages with automatic alignment and styling. ### Recommended Use Cases - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI struct UseMessageBubbleBasic: View { var body: some View { VStack { MessageBubbleBasic(msgDateTime: Date.now, msgText: "Ahoy, know Compot?", isMsgFromUser: false) MessageBubbleBasic(msgDateTime: Date.now, msgText: "Yeah, crazy, right! What's your favorite component?", isMsgFromUser: true) } .padding() } } #Preview { UseMessageBubbleBasic() } struct MessageBubbleBasic: View { var msgDateTime: Date? var msgText: String var isMsgFromUser: Bool var body: some View { VStack(alignment: .center, spacing: 8) { dateTime() HStack { text } .frame(maxWidth: .infinity, alignment: isMsgFromUser ? .trailing : .leading) } .frame(maxWidth: .infinity, alignment: .center) .padding(.vertical, 4) } @ViewBuilder private func dateTime() -> some View { if let dateTime = msgDateTime { Text(dateTime, format: Date.FormatStyle(date: .complete, time: .shortened)) .font(.caption2) .foregroundStyle(.secondary) } } private var text: some View { VStack { Text(msgText) .font(.system(size: 17)) .foregroundStyle(isMsgFromUser ? .white : .primary) .multilineTextAlignment(.leading) .padding(.horizontal, 12) .padding(.vertical, 8) .background(isMsgFromUser ? Color.blue : Color(uiColor: .secondarySystemFill)) .clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous)) } .frame(maxWidth: UIScreen.main.bounds.width * 0.75, alignment: isMsgFromUser ? .trailing : .leading) } } ``` --- ## 127. Typing Indicator - **URL**: https://www.compotui.com/components/chat/typing-indicator - **Category**: [Shapes, Chat & Real-Time](https://www.compotui.com/components/chat) - **Identifier**: `typingIndicator` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: dashboard - **Keywords**: typing, indicator, animation, chat ### Description & Overview A neat and animated typing indicator for chat interfaces, featuring three bouncing dots. ### Recommended Use Cases - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift struct TypingIndicator: View { let delay: Double = 0.3 @State private var isAnimating = false let pointSize: CGFloat = 10 let pointSpacing: CGFloat = 4 let accentColor: Color = .blue var body: some View { HStack(spacing: pointSpacing) { ForEach(0..<3) { index in Circle() .frame(width: pointSize, height: pointSize) .foregroundStyle(accentColor) .scaleEffect(isAnimating ? 1 : 0.6) .animation(.easeInOut(duration: 0.6).repeatForever(autoreverses: true).delay(delay * Double(index)), value: isAnimating) } } .padding() .background(accentColor.opacity(0.3), in: Capsule()) .onAppear { isAnimating = true } } } #Preview { TypingIndicator() } ``` --- ## 128. Stats Navigation Tile - **URL**: https://www.compotui.com/components/tiles/stats-navigation-tile - **Category**: [Tiles & Selectables](https://www.compotui.com/components/tiles) - **Identifier**: `navigationTile` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: dashboard - **Keywords**: tile, premium, stats ### Description & Overview `Stats Tile` is an interactive tile component suitable for grid layouts and dashboard navigation. ### Recommended Use Cases - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift VStack(spacing: 8) { HStack { ZStack { RoundedRectangle(cornerRadius: 6) .foregroundStyle(.red) Image(systemName: "bell") .resizable() .scaledToFit() .foregroundStyle(.white) .frame(width: 16, height: 16) } .frame(width: 24, height: 24) Spacer() Text(1, format: .number) } .font(.system(size: 20, weight: .bold, design: .rounded)) HStack { Text("Notifications") .foregroundStyle(.secondary) Spacer() Image(systemName: "chevron.right") .font(.footnote) .foregroundStyle(.secondary) } .font(.system(size: 17, weight: .regular, design: .rounded)) } .font(.system(size: 17, weight: .medium, design: .rounded)) .padding() .frame(maxWidth: 180) .background(.thinMaterial) .clipShape(.rect(cornerRadius: 12)) .shadow(color: .gray.opacity(0.3), radius: 1) ``` --- ## 129. Selectable Tile - **URL**: https://www.compotui.com/components/tiles/selectable-tile - **Category**: [Tiles & Selectables](https://www.compotui.com/components/tiles) - **Identifier**: `selectableTile` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: dashboard - **Keywords**: selection carousel ### Description & Overview `Selectable Tile` is an interactive tile component suitable for grid layouts and dashboard navigation. ### Recommended Use Cases - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI struct UseSelectableTile: View { @State private var selection: SelectableOption = .option1 private static func playHaptic() { #if os(iOS) let impact = UIImpactFeedbackGenerator(style: .soft) impact.impactOccurred() #endif } private let tileWidth: CGFloat = 160 private let tileHeight: CGFloat = 140 private let horizontalSpacing: CGFloat = 12 private let carouselHorizontalPadding: CGFloat = 16 var body: some View { VStack { ScrollViewReader { scrollViewProxy in ScrollView(.horizontal, showsIndicators: false) { HStack(spacing: horizontalSpacing) { ForEach(SelectableOption.allCases, id: \\.self) { option in SelectableTile( selectableOption: option, isSelected: option == selection ) .frame(width: tileWidth, height: tileHeight) .contentShape(Rectangle()) .onTapGesture { UseSelectableTile.playHaptic() withAnimation(.snappy(duration: 0.25, extraBounce: 0.05)) { selection = option } } .id(option) } } .padding(.horizontal, carouselHorizontalPadding) .padding(.vertical, 8) } .ignoresSafeArea(.container, edges: .horizontal) .onChange(of: selection) { withAnimation(.snappy(duration: 0.35, extraBounce: 0.08)) { scrollViewProxy.scrollTo(selection, anchor: .leading) } } .onAppear { DispatchQueue.main.async { withAnimation(.snappy(duration: 0.35)) { scrollViewProxy.scrollTo(selection, anchor: .center) } } } } } } } enum SelectableOption: Identifiable, Hashable, CaseIterable, Codable { case option1 case option2 case option3 var id: SelectableOption { self } var displayName: String { switch self { case .option1: "Nice Option" case .option2: "Better Option" case .option3: "Great Option" } } var description: String { switch self { case .option1: "This is a nice option to go for." case .option2: "This is a better option to go for." case .option3: "But this option is great!" } } } struct SelectableTile: View { let selectableOption: SelectableOption let isSelected: Bool private let cornerRadius: CGFloat = 12 private let selectedStrokeWidth: CGFloat = 2.5 private let checkmarkPadding: CGFloat = 6 var body: some View { ZStack(alignment: .topTrailing) { VStack(alignment: .leading, spacing: 5) { Text(selectableOption.displayName) .font(.system(size: 16)) .foregroundColor(.primary) .lineLimit(2) .minimumScaleFactor(0.8) Text(selectableOption.description) .font(.system(size: 13)) .foregroundColor(.secondary) .lineLimit(5) .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading) Spacer(minLength: 0) } .padding() .frame(maxWidth: .infinity, maxHeight: .infinity) .background(.thinMaterial, in: RoundedRectangle(cornerRadius: cornerRadius, style: .continuous)) .overlay { if isSelected { RoundedRectangle(cornerRadius: cornerRadius - (selectedStrokeWidth / 2)) .stroke(Color.accentColor, lineWidth: selectedStrokeWidth) .padding(selectedStrokeWidth / 2) } } if isSelected { Image(systemName: "checkmark.circle.fill") .font(.title3) .foregroundColor(Color.accentColor) .background(Circle().fill(.background.opacity(0.6)).blur(radius: 1.0)) .padding(checkmarkPadding) .transition(.scale.combined(with: .opacity)) } } .animation(.easeInOut(duration: 0.2), value: isSelected) } } ``` --- ## 130. Pill Follower Count Info - **URL**: https://www.compotui.com/components/badges/pill-follower-count-info - **Category**: [Badges & Pills](https://www.compotui.com/components/badges) - **Identifier**: `pillFollowerCountInfo` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: account, dashboard, paywall ### Description & Overview `Pill Follower Count Info` is a custom geometric graphic or decorative layout element. ### Recommended Use Cases - Paywalls, upgrade prompts, and subscription tiers - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI struct UsePillFollowerCountInfo: View { var body: some View { PillFollowerCountInfo(count: 0) } } #Preview { UsePillFollowerCountInfo() } struct PillFollowerCountInfo: View { let count: Int var body: some View { HStack { if count == 0 { Image(systemName: "nosign") Text("No Followers") } else { Text("^[\\(count) \\("Follower")](inflect: true)") } } .padding(.horizontal, 10) .padding(.vertical, 8) .font(.system(size: 13, weight: .regular, design: .default)) .foregroundStyle(.primary) .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 25.0, style: .continuous)) } } #Preview { PillFollowerCountInfo(count: 10) } ``` --- ## 131. Custom Alert View - **URL**: https://www.compotui.com/components/alerts/custom-alert-view - **Category**: [Alerts & Modals](https://www.compotui.com/components/alerts) - **Identifier**: `alertBasicCustom` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: dashboard - **Keywords**: alert modifier ### Description & Overview `Custom Alert` is a modal alert presentation for confirmations, warnings, and prompt actions. ### Recommended Use Cases - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift import SwiftUI struct UseCustomAlert: View { @State private var showAlert: Bool = true private func handleAction() { print("Action triggered") } var body: some View { VStack { Button("Show Alert") { showAlert.toggle() } } .customAlert( isPresented: $showAlert, title: "Permanently Delete?", message: "Do you really want to permanently delete this item? This action cannot be undone and all associated data will be lost.", icon: Image(systemName: "trash.fill"), iconTintColor: .red, primaryAction: CustomAlertAction(label: "Delete", style: .destructive) { handleAction() showAlert = false }, secondaryAction: CustomAlertAction(label: "Cancel", style: .cancel) { showAlert = false } ) } } #Preview { UseCustomAlert() } // Enum to define the style of an alert action button enum CustomAlertActionStyle { case primary case secondary case destructive case cancel var foregroundStyle: Color { switch self { case .primary: return .accentColor case .secondary, .cancel: return .accentColor case .destructive: return .red } } var fontWeight: Font.Weight { switch self { case .primary, .destructive: return .semibold case .secondary, .cancel: return .regular } } } struct CustomAlertAction { let id = UUID() let label: String let style: CustomAlertActionStyle let action: () -> Void } struct CustomAlertDisplayView: View { let title: String let message: String? let icon: Image? let iconTintColor: Color // Actions let primaryAction: CustomAlertAction let secondaryAction: CustomAlertAction? private var hasOnlyOneAction: Bool { secondaryAction == nil } var body: some View { VStack(spacing: 0) { if let icon = icon { icon .resizable() .scaledToFit() .frame(width: 40, height: 40) .foregroundColor(iconTintColor) .padding(.bottom, 10) } Text(title) .font(.system(size: 18, weight: .semibold)) .foregroundColor(.primary) .multilineTextAlignment(.center) .padding(.bottom, message == nil && icon == nil ? 20 : 6) if let message = message, !message.isEmpty { Text(message) .font(.system(size: 14, weight: .regular)) .foregroundColor(.secondary) .multilineTextAlignment(.center) .lineLimit(nil) .fixedSize(horizontal: false, vertical: true) .padding(.horizontal) .padding(.bottom, 20) } buttonLayout } .padding(.top, 20) .frame(maxWidth: 300) .background(Material.regular) .clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous)) .shadow(color: .black.opacity(0.12), radius: 20, x: 0, y: 8) .overlay( RoundedRectangle(cornerRadius: 16, style: .continuous) .stroke(Color.primary.opacity(0.1), lineWidth: 0.5) ) } @ViewBuilder private var buttonLayout: some View { VStack(spacing: 0) { Divider() if let secondaryAction = secondaryAction { HStack(spacing: 0) { alertButton(for: secondaryAction) Divider() alertButton(for: primaryAction) } .frame(height: 48) } else { alertButton(for: primaryAction) .frame(height: 48) } } } @ViewBuilder private func alertButton(for alertAction: CustomAlertAction) -> some View { Button { alertAction.action() } label: { Text(alertAction.label) .font(.system(size: 17, weight: alertAction.style.fontWeight)) .foregroundStyle(alertAction.style.foregroundStyle) .frame(maxWidth: .infinity, maxHeight: .infinity) .contentShape(Rectangle()) } } } struct CustomAlertModifier: ViewModifier { @Binding var isPresented: Bool let title: String let message: String? let icon: Image? let iconTintColor: Color let primaryAction: CustomAlertAction let secondaryAction: CustomAlertAction? func body(content: Content) -> some View { ZStack { content if isPresented { Color.black.opacity(0.45) .ignoresSafeArea() .transition(.opacity) CustomAlertDisplayView( title: title, message: message, icon: icon, iconTintColor: iconTintColor, primaryAction: primaryAction, secondaryAction: secondaryAction ) .padding(.horizontal, 28) .transition(alertTransition) } } .animation(.spring(response: 0.35, dampingFraction: 0.8, blendDuration: 0), value: isPresented) } private var alertTransition: AnyTransition { .asymmetric( insertion: .opacity.combined(with: .scale(scale: 1.1, anchor: .center)), removal: .opacity.combined(with: .scale(scale: 0.85, anchor: .center)) ) } } extension View { func customAlert( isPresented: Binding, title: String, message: String? = nil, icon: Image? = nil, iconTintColor: Color = .accentColor, // Default icon tint primaryAction: CustomAlertAction, secondaryAction: CustomAlertAction? = nil ) -> some View { self.modifier( CustomAlertModifier( isPresented: isPresented, title: title, message: message, icon: icon, iconTintColor: iconTintColor, primaryAction: primaryAction, secondaryAction: secondaryAction ) ) } } ``` --- ## 132. Toast Message Large - **URL**: https://www.compotui.com/components/toasts/toast-message-large - **Category**: [Toasts & Feedback](https://www.compotui.com/components/toasts) - **Identifier**: `toastMessageLargeSquare` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Pro - **Themes**: dashboard - **Keywords**: toast, message, large ### Description & Overview `Toast Message Large` is a modal alert presentation for confirmations, warnings, and prompt actions. ### Recommended Use Cases - Dashboard overviews, stats tracking, and metric highlights ### SwiftUI Code ```swift VStack(alignment: .center, spacing: 16) { Image(systemName: "checkmark.circle") .resizable() .scaledToFit() .frame(width: 97, height: 97) .foregroundStyle(.green) VStack(alignment: .center, spacing: 2) { Text("Success") .font(.title2) .fontWeight(.bold) .kerning(0.35) .multilineTextAlignment(.center) Text("New item was created and added to your library.") .font(.body) .multilineTextAlignment(.center) .lineLimit(2) } //: VSTACK .padding(0) .foregroundStyle(.secondary) .frame(width: 218, alignment: .center) } //: VSTACK .padding(.horizontal, 16) .padding(.top, 38) .padding(.bottom, 35) .frame(width: 250, alignment: .center) .background(Color(UIColor.secondarySystemBackground)) .clipShape(.rect(cornerRadius: 32)) ``` --- ## 133. Content Unavailable View Template - **URL**: https://www.compotui.com/components/templates/content-unavailable-view-template - **Category**: [Developer Templates & Architecture](https://www.compotui.com/components/templates) - **Identifier**: `contentUnavailableBasic` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: list - **Keywords**: content, unavailable, template ### Description & Overview `Content Unavailable Basic` is a modular SwiftUI placeholder component designed for modern iOS apps. ### Recommended Use Cases - Integrating into standard iOS placeholder workflows - Polishing app UI with native iOS system styling - Speeding up custom SwiftUI screen development ### SwiftUI Code ```swift 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) } ``` --- ## 134. App Styles Template - **URL**: https://www.compotui.com/components/templates/app-styles-template - **Category**: [Developer Templates & Architecture](https://www.compotui.com/components/templates) - **Identifier**: `appStylesTemplate` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: other ### Description & Overview It can be convenient to use constants instead of hardcoded values to define app styles, because if you decide to change the styles later, you only need to change the value of the constant in one place. ### Recommended Use Cases - Integrating into standard iOS helper workflows - Polishing app UI with native iOS system styling - Speeding up custom SwiftUI screen development ### SwiftUI Code ```swift 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() } ``` --- ## 135. App Microcopy Template - **URL**: https://www.compotui.com/components/templates/app-microcopy-template - **Category**: [Developer Templates & Architecture](https://www.compotui.com/components/templates) - **Identifier**: `appMicrocopyTemplate` - **Compatibility**: iOS 16.0+ (Xcode 15+) - **Platform**: iOS - **License Tier**: Free - **Themes**: other ### Description & Overview It is convenient to use constants for texts that are repeated in the app, because then you can edit the texts only in one place. ### Recommended Use Cases - Integrating into standard iOS helper workflows - Polishing app UI with native iOS system styling - Speeding up custom SwiftUI screen development ### SwiftUI Code ```swift // 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 } } ```