Building a Custom UI Component in SwiftUI | by Swati Mishra | Mar, 2025

SwiftUI makes it easy to create reusable and customizable UI components. In this article, we’ll walk through the process of building a custom UI component from scratch, applying modifiers, and making it flexible for different use cases.

Custom UI components help in:

• Reusing code efficiently.
• Maintaining consistency across the app.
• Improving scalability by keeping the UI modular.

Let’s build a custom RoundedButton component that can be reused throughout an app.

import SwiftUI

struct RoundedButton: View {
var title: String
var backgroundColor: Color
var action: () -> Void
var body: some View {
Button(action: action) {
Text(title)
.font(.headline)
.foregroundColor(.white)
.padding()
.frame(maxWidth: .infinity)
.background(backgroundColor)
.cornerRadius(10)
}
.padding(.horizontal)
}
}

Now that we’ve defined RoundedButton, we can use it anywhere in our app:

struct ContentView…