How do I actually start building a custom modifier?

Think of a ViewModifier as a way to bundle a set of changes you find yourself repeating over and over. Instead of piling five or six modifiers on every single Text or VStack in your app, you encapsulate them into a single reusable object.

To do this, you create a struct that conforms to the ViewModifier protocol. This requires you to implement a body(content:) method. The content parameter is basically the view that the modifier is being applied to. You wrap that content in your styles and return it.

struct CardStyle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(Color.white)
            .cornerRadius(12)
            .shadow(color: Color.black.opacity(0.1), radius: 5, x: 0, y: 2)
    }
}

I usually do this when I notice my UI code starting to look like a shopping list of modifiers. It cleans up the call site significantly.

Can I pass data into the modifier to make it flexible?

Absolutely. Since a modifier is just a struct, you can give it properties. This is where it gets powerful because you can change the "theme" of the modifier based on the context of the view.

Let's say you want your cards to have different border colors depending on whether they represent a "Warning" or "Success" state. You just add a property to your struct:

struct CardStyle: ViewModifier {
    var accentColor: Color = .blue // Default value

    func body(content: Content) -> some View {
        content
            .padding()
            .background(Color.white)
            .cornerRadius(12)
            .overlay(
                RoundedRectangle(cornerRadius: 12)
                    .stroke(accentColor, lineWidth: 2)
            )
            .shadow(radius: 3)
    }
}

Now you aren't locked into one look; you've built a tool that's adaptable.

How do I make it feel like a native SwiftUI modifier?

Right now, to use your modifier, you have to call .modifier(CardStyle(accentColor: .green)). Honestly? That's clunky. It doesn't feel like the rest of the SwiftUI DSL.

The industry standard is to create an extension on View. This wraps the modifier call into a clean, dot-syntax method. It's a tiny bit more boilerplate upfront, but your teammates (and your future self) will thank you for the readability.

extension View {
    func cardStyle(color: Color = .blue) -> some View {
        self.modifier(CardStyle(accentColor: color))
    }
}

// Now you can use it like this:
Text("Hello World")
    .cardStyle(color: .purple)

By doing this, .cardStyle() becomes a first-class citizen in your project, exactly like .padding() or .font().

📋 Practical Task

Exercise: The Neon-Glow Profile Card

Your goal is to create a custom ViewModifier that gives a view a "Neon Glow" effect. This is a common pattern for high-contrast dashboards or gaming apps.

• Create a ViewModifier named NeonGlow.
• The modifier should accept a glowColor: Color property.
• Inside the body, apply the following to the content:
  • A padding of 16.
  • A background of Color.black.
  • A cornerRadius of 20.
  • An overlay consisting of a RoundedRectangle with a stroke of glowColor and a lineWidth of 3.
  • A shadow using the glowColor with a radius of 10.
• Create an extension on View called neonGlow(color:) that applies this modifier.
• Apply this modifier to a VStack containing a user's name and bio to verify it works.