Advertisement

728×90

below-header · Ad slot ready

⚙️Loaders 🌈Gradients 🪪Cards ⚡Animations 🔔Alerts 📸Photo Picker 🕶️Shadows 🔘Buttons 🧩Grids 🎨Palettes 🔍JSON → Model 🌐API Generator 📝Postman → Code 📋JSON Format 🔐Base64

Alert Generator

Alert Type

Icon Settings

Show Icon

Custom Icon (leave empty for default)

Content

Title

Message

Buttons

Number of Buttons: 1

Primary Button

Button Text

Style

Tint Color

Background Color

Text Color

Padding: 8px

Corner Radius: 8px

Enable Border

Enable Shadow

Appearance

Corner Radius: 12px

Padding: 24px

Enable Shadow

Shadow Radius: 20

Shadow Opacity: 10%

Background Color

Title Color

Message Color

Background Blur

Blur Background

Blur Intensity: 10

Behavior

Dismissible (tap outside to dismiss)

Auto Dismiss

Animation

Animation Type

Animation Duration: 0.3s

Alert Generator

Alert Type

Icon Settings

Show Icon

Custom Icon (leave empty for default)

Content

Title

Message

Buttons

Number of Buttons: 1

Primary Button

Button Text

Style

Tint Color

Background Color

Text Color

Padding: 8px

Corner Radius: 8px

Enable Border

Enable Shadow

Appearance

Corner Radius: 12px

Padding: 24px

Enable Shadow

Shadow Radius: 20

Shadow Opacity: 10%

Background Color

Title Color

Message Color

Background Blur

Blur Background

Blur Intensity: 10

Behavior

Dismissible (tap outside to dismiss)

Auto Dismiss

Animation

Animation Type

Animation Duration: 0.3s

Generated Swift Code

4 blocks

Usage Example

import SwiftUI

// MARK: - Usage Example

struct ContentView: View {

@State private var showAlert = false

var body: some View {

VStack {

Button("Show Alert") {

showAlert = true

}

}

.customAlert(

isPresented: $showAlert,

title: "Success",

message: "Operation completed successfully",

action: {

print("Primary action")

},

secondaryAction: nil,

tertiaryAction: nil,

autoDismiss: false,

autoDismissDelay: 3

)

}

}

Custom Alert Component

// MARK: - Main Component

struct CustomAlert: View {

@Binding var isPresented: Bool

let title: String

let message: String

var action: () -> Void = {}

var secondaryAction: (() -> Void)? = nil

var tertiaryAction: (() -> Void)? = nil

var autoDismiss: Bool = false

var autoDismissDelay: Double = 3.0

var dismissible: Bool = true

@State private var dismissTimer: Timer?

var body: some View {

ZStack {

Color.black.opacity(0.3)

.ignoresSafeArea()

.blur(radius: 10)

.onTapGesture {

if dismissible {

isPresented = false

}

}

if isPresented {

VStack(spacing: 0) {

// Icon and Title

HStack(spacing: 12) {

Circle()

.fill(Color(hex: "#10b981").opacity(0.2))

.frame(width: 40, height: 40)

.overlay(

Text("✓")

.font(.system(size: 20, weight: .bold))

.foregroundColor(Color(hex: "#10b981"))

)

Text(title)

.font(.system(size: 20, weight: .bold))

.foregroundColor(Color(hex: "#000000"))

}

.frame(maxWidth: .infinity, alignment: .leading)

.padding(.horizontal, 24)

.padding(.top, 24)

// Message

Text(message)

.font(.system(size: 14))

.foregroundColor(Color(hex: "#666666"))

.frame(maxWidth: .infinity, alignment: .leading)

.padding(.horizontal, 24)

.padding(.top, 12)

// Buttons

HStack(spacing: 8) {

Button("OK") {

action()

isPresented = false

}

.buttonStyle(.borderedProminent)

.tint(Color(hex: "#10b981"))

}

.padding(.horizontal, 24)

.padding(.top, 20)

.padding(.bottom, 24)

}

.frame(maxWidth: 400)

.background(Color(hex: "#ffffff"))

.cornerRadius(12)

.shadow(color: Color.black.opacity(0.1), radius: 20, x: 0, y: 10)

.transition(.opacity)

.animation(.easeOut(duration: 0.3), value: isPresented)

.onAppear {

if autoDismiss {

dismissTimer = Timer.scheduledTimer(withTimeInterval: autoDismissDelay, repeats: false) { _ in

isPresented = false

}

}

}

.onDisappear {

dismissTimer?.invalidate()

}

}

}

}

}

Alert Modifier

// MARK: - ViewModifier

struct CustomAlertModifier: ViewModifier {

@Binding var isPresented: Bool

let title: String

let message: String

var action: () -> Void = {}

var secondaryAction: (() -> Void)? = nil

var tertiaryAction: (() -> Void)? = nil

var autoDismiss: Bool = false

var autoDismissDelay: Double = 3.0

var dismissible: Bool = true

func body(content: Content) -> some View {

ZStack {

content

CustomAlert(

isPresented: $isPresented,

title: title,

message: message,

action: action,

secondaryAction: secondaryAction,

tertiaryAction: tertiaryAction,

autoDismiss: autoDismiss,

autoDismissDelay: autoDismissDelay,

dismissible: dismissible

)

}

}

}

// MARK: - View Extension

extension View {

func customAlert(

isPresented: Binding<Bool>,

title: String,

message: String,

action: @escaping () -> Void = {},

secondaryAction: (() -> Void)? = nil,

tertiaryAction: (() -> Void)? = nil,

autoDismiss: Bool = false,

autoDismissDelay: Double = 3.0,

dismissible: Bool = true

) -> some View {

self.modifier(CustomAlertModifier(

isPresented: isPresented,

title: title,

message: message,

action: action,

secondaryAction: secondaryAction,

tertiaryAction: tertiaryAction,

autoDismiss: autoDismiss,

autoDismissDelay: autoDismissDelay,

dismissible: dismissible

))

}

}

Color Extension

Optional

// MARK: - Helper Extensions

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

)

}

}

Alert Generator

Alert Type

Icon Settings

Show Icon

Custom Icon (leave empty for default)

Content

Title

Message

Buttons

Number of Buttons: 1

Primary Button

Button Text

Style

Tint Color

Background Color

Text Color

Padding: 8px

Corner Radius: 8px

Enable Border

Enable Shadow

Appearance

Corner Radius: 12px

Padding: 24px

Enable Shadow

Shadow Radius: 20

Shadow Opacity: 10%

Background Color

Title Color

Message Color

Background Blur

Blur Background

Blur Intensity: 10

Behavior

Dismissible (tap outside to dismiss)

Auto Dismiss

Animation

Animation Type

Animation Duration: 0.3s

Device Preview

✓

Success

Operation completed successfully

Generated Swift Code

4 blocks

Usage Example

import SwiftUI

// MARK: - Usage Example

struct ContentView: View {

@State private var showAlert = false

var body: some View {

VStack {

Button("Show Alert") {

showAlert = true

}

}

.customAlert(

isPresented: $showAlert,

title: "Success",

message: "Operation completed successfully",

action: {

print("Primary action")

},

secondaryAction: nil,

tertiaryAction: nil,

autoDismiss: false,

autoDismissDelay: 3

)

}

}

Custom Alert Component

// MARK: - Main Component

struct CustomAlert: View {

@Binding var isPresented: Bool

let title: String

let message: String

var action: () -> Void = {}

var secondaryAction: (() -> Void)? = nil

var tertiaryAction: (() -> Void)? = nil

var autoDismiss: Bool = false

var autoDismissDelay: Double = 3.0

var dismissible: Bool = true

@State private var dismissTimer: Timer?

var body: some View {

ZStack {

Color.black.opacity(0.3)

.ignoresSafeArea()

.blur(radius: 10)

.onTapGesture {

if dismissible {

isPresented = false

}

}

if isPresented {

VStack(spacing: 0) {

// Icon and Title

HStack(spacing: 12) {

Circle()

.fill(Color(hex: "#10b981").opacity(0.2))

.frame(width: 40, height: 40)

.overlay(

Text("✓")

.font(.system(size: 20, weight: .bold))

.foregroundColor(Color(hex: "#10b981"))

)

Text(title)

.font(.system(size: 20, weight: .bold))

.foregroundColor(Color(hex: "#000000"))

}

.frame(maxWidth: .infinity, alignment: .leading)

.padding(.horizontal, 24)

.padding(.top, 24)

// Message

Text(message)

.font(.system(size: 14))

.foregroundColor(Color(hex: "#666666"))

.frame(maxWidth: .infinity, alignment: .leading)

.padding(.horizontal, 24)

.padding(.top, 12)

// Buttons

HStack(spacing: 8) {

Button("OK") {

action()

isPresented = false

}

.buttonStyle(.borderedProminent)

.tint(Color(hex: "#10b981"))

}

.padding(.horizontal, 24)

.padding(.top, 20)

.padding(.bottom, 24)

}

.frame(maxWidth: 400)

.background(Color(hex: "#ffffff"))

.cornerRadius(12)

.shadow(color: Color.black.opacity(0.1), radius: 20, x: 0, y: 10)

.transition(.opacity)

.animation(.easeOut(duration: 0.3), value: isPresented)

.onAppear {

if autoDismiss {

dismissTimer = Timer.scheduledTimer(withTimeInterval: autoDismissDelay, repeats: false) { _ in

isPresented = false

}

}

}

.onDisappear {

dismissTimer?.invalidate()

}

}

}

}

}

Alert Modifier

// MARK: - ViewModifier

struct CustomAlertModifier: ViewModifier {

@Binding var isPresented: Bool

let title: String

let message: String

var action: () -> Void = {}

var secondaryAction: (() -> Void)? = nil

var tertiaryAction: (() -> Void)? = nil

var autoDismiss: Bool = false

var autoDismissDelay: Double = 3.0

var dismissible: Bool = true

func body(content: Content) -> some View {

ZStack {

content

CustomAlert(

isPresented: $isPresented,

title: title,

message: message,

action: action,

secondaryAction: secondaryAction,

tertiaryAction: tertiaryAction,

autoDismiss: autoDismiss,

autoDismissDelay: autoDismissDelay,

dismissible: dismissible

)

}

}

}

// MARK: - View Extension

extension View {

func customAlert(

isPresented: Binding<Bool>,

title: String,

message: String,

action: @escaping () -> Void = {},

secondaryAction: (() -> Void)? = nil,

tertiaryAction: (() -> Void)? = nil,

autoDismiss: Bool = false,

autoDismissDelay: Double = 3.0,

dismissible: Bool = true

) -> some View {

self.modifier(CustomAlertModifier(

isPresented: isPresented,

title: title,

message: message,

action: action,

secondaryAction: secondaryAction,

tertiaryAction: tertiaryAction,

autoDismiss: autoDismiss,

autoDismissDelay: autoDismissDelay,

dismissible: dismissible

))

}

}

Color Extension

Optional

// MARK: - Helper Extensions

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

)

}

}

Advertisement

728×90

between-tool-content · Ad slot ready

SwiftUI Alert Generator

Generate custom SwiftUI alert/popup components with common variants (success, error, warning, info).

Copy the code and customize visuals to match your app theme.

How to use

Pick alert type and button layout.
Customize title, message, and actions.
Copy the alert or custom popup component code.
Wire presentation to your view state.

Advertisement

Responsive

in-content · Ad slot ready

Examples (copy-paste)

Basic SwiftUI alert

Button("Delete") { showAlert = true }
.alert("Are you sure?", isPresented: $showAlert) {
  Button("Delete", role: .destructive) {}
  Button("Cancel", role: .cancel) {}
}

FAQs

Native .alert vs custom popup?: The generator supports both system alerts and custom overlay popups.

Related tools

SwiftUI Loader Generator

SwiftUI Gradient Generator

SwiftUI Card Generator

SwiftUI Animation Generator

SwiftUI Photo Picker Generator