38 Reusable SwiftUI Components You Can Copy-Paste Into Your Project

#ios #swift #tutorial #mobile

Building iOS apps from scratch takes forever. You spend hours creating the same buttons, cards, and form fields for every project.

I put together a collection of 38 reusable SwiftUI components that you can literally copy-paste into any project.

What's Inside

Buttons (5 components)

// Primary button with loading state
PrimaryButton(title: "Continue", action: {
    // your action
}, isLoading: isLoading)

// Gradient button
GradientButton(title: "Get Started", action: {}, colors: [.purple, .blue])

// Floating Action Button
FloatingActionButton(icon: "plus", action: {}, color: .blue)

Cards (5 components)

// Stats card with trend indicator
StatsCard(
    title: "Revenue",
    value: "$12,450",
    icon: "dollarsign.circle.fill",
    trend: "+12%",
    trendUp: true
)

// Profile card
ProfileCard(
    name: "John Doe",
    subtitle: "iOS Developer",
    avatarIcon: "person.circle.fill",
    action: { /* navigate */ }
)

Forms (6 components)

// Styled text field with icon
StyledTextField(
    placeholder: "Email",
    text: $email,
    icon: "envelope"
)

// Secure field with visibility toggle
StyledSecureField(
    placeholder: "Password",
    text: $password
)

// Search bar
SearchBar(text: $searchText, onSubmit: { performSearch() })

Lists (5 components)

// Settings-style row
SettingRow(
    icon: "wifi",
    title: "Wi-Fi",
    value: "Connected",
    iconColor: .blue
)

// Notification row with badge
NotificationRow(
    icon: "heart.fill",
    title: "New Like",
    message: "Someone liked your post",
    time: "5m ago",
    isUnread: true
)

Navigation (5 components)

Custom NavigationBar
TabBar with badges
Segmented Control
Page Indicator
Breadcrumb

Modals (4 components)

// Bottom sheet
BottomSheet(isPresented: $showSheet) {
    YourContent()
}

// Toast notifications
Toast(message: "Saved!", type: .success)
Toast(message: "Error occurred", type: .error)

Loaders (8 components)

// Spinning loader
SpinningLoader(color: .blue, size: 40)

// Circular progress
CircularProgress(progress: $progress)

// Skeleton loading
SkeletonCard()

// Full-screen loading overlay
LoadingOverlay(message: "Loading...", isLoading: isLoading)