Snippets
Reusable SwiftUI ViewModifier and Shape Styling
Move repeated visual decisions into ViewModifier and Shape extensions so the UI reads like product language.
5 min readUpdated 2026-06
import SwiftUI
struct SurfaceCardModifier: ViewModifier {
func body(content: Content) -> some View {
content
.padding(16)
.background(.background, in: RoundedRectangle(cornerRadius: 16))
.overlay {
RoundedRectangle(cornerRadius: 16)
.strokeBorder(.quaternary)
}
}
}
extension View {
func surfaceCard() -> some View { modifier(SurfaceCardModifier()) }
}Implementation notes
A good modifier name explains the product role, not just the visual ingredients.
Shape extensions are useful when fill, trim, stroke, or strokeBorder patterns repeat.
Prefer small modifiers that compose well over one giant theme modifier.
Checklist
Check light mode, dark mode, and high contrast.
Keep layout-changing modifiers intentional.
Document style names in your design system when the team grows.
Related reference
SwiftUI Custom ButtonStyle, ToggleStyle, and LabelStyle
Create reusable control styles when repeated UI behavior belongs to the component system rather than a single screen.
SwiftUI Shapes, Path, Trim, and Stroke
Build reusable visual primitives with Shape, Path, stroke, fill, and trim instead of baking every decoration into image assets.
SwiftUI Overlay, Background, and zIndex
Layer views deliberately with background, overlay, and zIndex while keeping the base layout stable.