SwiftUI Component Libraries · 2026

The Best SwiftUI Component Library (2026): Kits & UI Libraries Compared

The best SwiftUI component libraries and UI kits for 2026 — buttons, cards, sheets, charts, toasts, and full design systems, free and paid, compared for indie iOS developers.

Last updated: 2026-09-06 10 min read By Ahmed Gagan, iOS Engineer

Quick Answer

There is no single best SwiftUI component library. For free, drop-in UI (search bars, paging, extra controls) use SwiftUIX or ComponentsKit. For motion, Pow. For charts, Apple's Swift Charts. For markdown, MarkdownUI. For toasts, AlertToast. If you want those pieces already themed as one design system — plus auth, paywall, and onboarding — The Swift Kit is the full kit, $99 one-time. Most indie apps ship 3–5 focused packages, not one mega UI kit.

Best free libraries

SwiftUIX · ComponentsKit · Swift Charts

Best for animations

Pow · Wave · Inferno

Full design system

The Swift Kit (one-file retheme)

Native-first

~90% covered by SwiftUI 6

Which One Do You Actually Need?

Pick what you’re trying to build. Most answers here are a free library — you only need a design system when consistency across many screens becomes the problem.

28 SwiftUI Components, Live — Copy Any of Them

Every component below is rendered from the same SwiftUI you can copy. They are the building blocks we ship in The Swift Kit's design system — buttons through paywalls — and each one works standalone in an empty project on iOS 16+.

Primary Button

iOS 16.0

Filled call-to-action with a press-scale effect and haptic feedback.

struct PrimaryButton: View {
    let title: String
    var action: () -> Void

    var body: some View {
        Button {
            UIImpactFeedbackGenerator(style: .medium).impactOccurred()
            action()
        } label: {
            Text(title)
                .font(.headline)
                .foregroundStyle(.white)
                .frame(maxWidth: .infinity)
                .padding(.vertical, 16)
                .background(Color.accentColor, in: .rect(cornerRadius: 14))
        }
        .buttonStyle(PressableStyle())
    }
}

/// Reusable press effect — scale + fade, spring back on release.
struct PressableStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .scaleEffect(configuration.isPressed ? 0.97 : 1)
            .opacity(configuration.isPressed ? 0.9 : 1)
            .animation(.spring(response: 0.3, dampingFraction: 0.7),
                       value: configuration.isPressed)
    }
}

Secondary Button

iOS 16.0

Bordered alternative for the lower-priority action in a pair.

struct SecondaryButton: View {
    let title: String
    var action: () -> Void

    var body: some View {
        Button(action: action) {
            Text(title)
                .font(.headline)
                .foregroundStyle(Color.accentColor)
                .frame(maxWidth: .infinity)
                .padding(.vertical, 16)
                .background {
                    RoundedRectangle(cornerRadius: 14)
                        .strokeBorder(Color.accentColor.opacity(0.35), lineWidth: 1)
                }
        }
        .buttonStyle(PressableStyle())
    }
}

Destructive Button

iOS 16.0

Red-tinted action for deletes, with a confirmation dialog attached.

struct DestructiveButton: View {
    let title: String
    var onConfirm: () -> Void
    @State private var confirming = false

    var body: some View {
        Button(role: .destructive) {
            confirming = true
        } label: {
            Text(title)
                .font(.headline)
                .foregroundStyle(.red)
                .frame(maxWidth: .infinity)
                .padding(.vertical, 16)
                .background(Color.red.opacity(0.12), in: .rect(cornerRadius: 14))
        }
        .confirmationDialog("Are you sure?", isPresented: $confirming, titleVisibility: .visible) {
            Button(title, role: .destructive, action: onConfirm)
            Button("Cancel", role: .cancel) {}
        }
    }
}

Loading Button

iOS 16.0

Swaps its label for a spinner and blocks re-entry while work is in flight.

struct LoadingButton: View {
    let title: String
    var action: () async -> Void
    @State private var isLoading = false

    var body: some View {
        Button {
            guard !isLoading else { return }
            isLoading = true
            Task {
                await action()
                isLoading = false
            }
        } label: {
            ZStack {
                // Keep the label in the layout so the button never resizes.
                Text(title).opacity(isLoading ? 0 : 1)
                if isLoading {
                    ProgressView().tint(.white)
                }
            }
            .font(.headline)
            .foregroundStyle(.white)
            .frame(maxWidth: .infinity)
            .padding(.vertical, 16)
            .background(Color.accentColor, in: .rect(cornerRadius: 14))
        }
        .disabled(isLoading)
        .animation(.easeInOut(duration: 0.2), value: isLoading)
    }
}

Icon Button

iOS 16.0

Circular glyph button sized to Apple’s 44pt minimum tap target.

struct IconButton: View {
    let systemName: String
    var action: () -> Void

    var body: some View {
        Button(action: action) {
            Image(systemName: systemName)
                .font(.system(size: 17, weight: .semibold))
                .foregroundStyle(.primary)
                .frame(width: 44, height: 44)     // Apple's minimum tap target
                .background(.ultraThinMaterial, in: .circle)
        }
        .buttonStyle(PressableStyle())
        .accessibilityLabel(Text(systemName))
    }
}

Weekly summary

You shipped 3 features and closed 12 issues this week.

Content Card

iOS 16.0

The workhorse surface — title, body, and a soft elevation shadow.

struct ContentCard<Content: View>: View {
    let title: String
    @ViewBuilder var content: Content

    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text(title)
                .font(.headline)
            content
                .font(.subheadline)
                .foregroundStyle(.secondary)
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .padding(16)
        .background(Color(.secondarySystemBackground), in: .rect(cornerRadius: 16))
        .shadow(color: .black.opacity(0.06), radius: 12, y: 4)
    }
}

Frosted surface

Legible over any backdrop

Glass Card

iOS 16.0

Frosted material surface that reads correctly over photos and gradients.

struct GlassCard<Content: View>: View {
    @ViewBuilder var content: Content

    var body: some View {
        content
            .padding(18)
            .background(.ultraThinMaterial, in: .rect(cornerRadius: 20))
            .overlay {
                // Hairline highlight keeps the edge crisp on bright backdrops.
                RoundedRectangle(cornerRadius: 20)
                    .strokeBorder(.white.opacity(0.18), lineWidth: 1)
            }
            .shadow(color: .black.opacity(0.18), radius: 20, y: 8)
    }
}

REVENUE

$2,480

↗ +12.4%

CHURN

1.8%

↘ −0.6%

Stat Card

iOS 16.0

Metric tile with a trend delta — tabular figures so columns line up.

struct StatCard: View {
    let label: String
    let value: String
    let delta: Double          // positive = up

    var body: some View {
        VStack(alignment: .leading, spacing: 6) {
            Text(label)
                .font(.caption)
                .foregroundStyle(.secondary)
                .textCase(.uppercase)

            Text(value)
                .font(.system(.title, design: .rounded, weight: .bold))
                .monospacedDigit()          // stops the number jittering on update

            Label(delta.formatted(.percent.precision(.fractionLength(1))),
                  systemImage: delta >= 0 ? "arrow.up.right" : "arrow.down.right")
                .font(.caption.weight(.semibold))
                .foregroundStyle(delta >= 0 ? .green : .red)
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .padding(16)
        .background(Color(.secondarySystemBackground), in: .rect(cornerRadius: 16))
    }
}

Styled Text Field

iOS 16.0

Focus-aware field that animates its border and exposes a clear button.

struct StyledTextField: View {
    let placeholder: String
    @Binding var text: String
    @FocusState private var focused: Bool

    var body: some View {
        HStack(spacing: 10) {
            TextField(placeholder, text: $text)
                .focused($focused)
                .textInputAutocapitalization(.never)
                .autocorrectionDisabled()

            if !text.isEmpty {
                Button { text = "" } label: {
                    Image(systemName: "xmark.circle.fill")
                        .foregroundStyle(.tertiary)
                }
                .transition(.opacity.combined(with: .scale))
            }
        }
        .padding(.horizontal, 14)
        .padding(.vertical, 13)
        .background(Color(.secondarySystemBackground), in: .rect(cornerRadius: 12))
        .overlay {
            RoundedRectangle(cornerRadius: 12)
                .strokeBorder(focused ? Color.accentColor : .clear, lineWidth: 1.5)
        }
        .animation(.easeOut(duration: 0.18), value: focused)
        .animation(.easeOut(duration: 0.18), value: text.isEmpty)
    }
}

Search Field

iOS 16.0

Inline search bar with a leading glyph and a cancel affordance.

struct SearchField: View {
    @Binding var query: String
    @FocusState private var focused: Bool

    var body: some View {
        HStack(spacing: 8) {
            HStack(spacing: 8) {
                Image(systemName: "magnifyingglass")
                    .foregroundStyle(.secondary)
                TextField("Search", text: $query)
                    .focused($focused)
                    .submitLabel(.search)
            }
            .padding(.horizontal, 12)
            .padding(.vertical, 10)
            .background(Color(.secondarySystemBackground), in: .rect(cornerRadius: 10))

            if focused {
                Button("Cancel") {
                    query = ""
                    focused = false
                }
                .transition(.move(edge: .trailing).combined(with: .opacity))
            }
        }
        .animation(.easeOut(duration: 0.2), value: focused)
    }
}

Notifications

Daily summary at 9:00

Toggle Row

iOS 16.0

Settings-style switch with a title, subtitle and tinted icon.

struct ToggleRow: View {
    let icon: String
    let title: String
    let subtitle: String?
    @Binding var isOn: Bool

    var body: some View {
        Toggle(isOn: $isOn) {
            HStack(spacing: 12) {
                Image(systemName: icon)
                    .font(.system(size: 15, weight: .semibold))
                    .foregroundStyle(.white)
                    .frame(width: 30, height: 30)
                    .background(Color.accentColor, in: .rect(cornerRadius: 8))

                VStack(alignment: .leading, spacing: 2) {
                    Text(title)
                    if let subtitle {
                        Text(subtitle)
                            .font(.caption)
                            .foregroundStyle(.secondary)
                    }
                }
            }
        }
        .padding(.vertical, 4)
    }
}

Segmented Picker

iOS 16.0

Custom segmented control with a spring-animated selection pill.

struct SegmentedPicker: View {
    let options: [String]
    @Binding var selection: Int
    @Namespace private var namespace

    var body: some View {
        HStack(spacing: 4) {
            ForEach(options.indices, id: \.self) { index in
                Button {
                    selection = index
                } label: {
                    Text(options[index])
                        .font(.subheadline.weight(.semibold))
                        .foregroundStyle(selection == index ? .primary : .secondary)
                        .frame(maxWidth: .infinity)
                        .padding(.vertical, 8)
                        .background {
                            if selection == index {
                                // matchedGeometryEffect is what makes the pill slide.
                                RoundedRectangle(cornerRadius: 8)
                                    .fill(Color(.systemBackground))
                                    .matchedGeometryEffect(id: "pill", in: namespace)
                                    .shadow(color: .black.opacity(0.08), radius: 3, y: 1)
                            }
                        }
                }
                .buttonStyle(.plain)
            }
        }
        .padding(4)
        .background(Color(.secondarySystemBackground), in: .rect(cornerRadius: 12))
        .animation(.spring(response: 0.3, dampingFraction: 0.8), value: selection)
    }
}

Details

Row 1

Row 2

Bottom Sheet (Detents)

iOS 16.0

Half-height sheet that can be dragged to full, with a visible grabber.

struct BottomSheetExample: View {
    @State private var showSheet = false

    var body: some View {
        Button("Show sheet") { showSheet = true }
            .sheet(isPresented: $showSheet) {
                SheetBody()
                    .presentationDetents([.medium, .large])
                    .presentationDragIndicator(.visible)
                    // iOS 16.4+: let the sheet scroll its content while collapsed.
                    .presentationContentInteraction(.scrolls)
            }
    }
}

struct SheetBody: View {
    @Environment(\.dismiss) private var dismiss

    var body: some View {
        NavigationStack {
            List(1...20, id: \.self) { Text("Row \($0)") }
                .navigationTitle("Details")
                .toolbar {
                    ToolbarItem(placement: .confirmationAction) {
                        Button("Done") { dismiss() }
                    }
                }
        }
    }
}

This removes all your data.
It cannot be undone.

Delete permanently

Cancel

Confirmation Dialog

iOS 16.0

Native action sheet for destructive choices — the correct pattern over a custom modal.

struct DeleteAccountButton: View {
    @State private var isPresented = false

    var body: some View {
        Button("Delete account", role: .destructive) {
            isPresented = true
        }
        .confirmationDialog(
            "Delete your account?",
            isPresented: $isPresented,
            titleVisibility: .visible
        ) {
            Button("Delete permanently", role: .destructive) {
                // perform deletion
            }
            Button("Cancel", role: .cancel) {}
        } message: {
            Text("This removes all your data. It cannot be undone.")
        }
    }
}

Saved to library

Toast

iOS 16.0

Transient top banner that auto-dismisses — attach anywhere with one modifier.

struct ToastModifier: ViewModifier {
    @Binding var message: String?
    var duration: TimeInterval = 2.5

    func body(content: Content) -> some View {
        content.overlay(alignment: .top) {
            if let message {
                HStack(spacing: 10) {
                    Image(systemName: "checkmark.circle.fill")
                        .foregroundStyle(.green)
                    Text(message)
                        .font(.subheadline.weight(.medium))
                }
                .padding(.horizontal, 16)
                .padding(.vertical, 12)
                .background(.regularMaterial, in: .capsule)
                .shadow(color: .black.opacity(0.15), radius: 12, y: 4)
                .padding(.top, 8)
                .transition(.move(edge: .top).combined(with: .opacity))
                .task(id: message) {
                    // .task(id:) cancels automatically if the message changes.
                    try? await Task.sleep(for: .seconds(duration))
                    self.message = nil
                }
            }
        }
        .animation(.spring(response: 0.35, dampingFraction: 0.8), value: message)
    }
}

extension View {
    func toast(_ message: Binding<String?>) -> some View {
        modifier(ToastModifier(message: message))
    }
}

Skeleton Loader

iOS 16.0

Shimmering placeholder that holds layout while content loads.

struct Shimmer: ViewModifier {
    @State private var phase: CGFloat = -1

    func body(content: Content) -> some View {
        content
            .overlay {
                LinearGradient(
                    colors: [.clear, .white.opacity(0.35), .clear],
                    startPoint: .leading,
                    endPoint: .trailing
                )
                .offset(x: phase * 350)
                .blendMode(.plusLighter)
            }
            .mask(content)          // keep the shine inside the shape
            .onAppear {
                withAnimation(.linear(duration: 1.4).repeatForever(autoreverses: false)) {
                    phase = 1.5
                }
            }
    }
}

struct SkeletonRow: View {
    var body: some View {
        HStack(spacing: 12) {
            Circle().frame(width: 44, height: 44)
            VStack(alignment: .leading, spacing: 8) {
                RoundedRectangle(cornerRadius: 4).frame(height: 12)
                RoundedRectangle(cornerRadius: 4).frame(width: 140, height: 12)
            }
        }
        .foregroundStyle(Color(.tertiarySystemFill))
        .modifier(Shimmer())
    }
}

68%

Progress Ring

iOS 16.0

Animated circular progress with a rounded cap and centred percentage.

struct ProgressRing: View {
    let progress: Double        // 0...1
    var lineWidth: CGFloat = 10

    var body: some View {
        ZStack {
            Circle()
                .stroke(Color(.tertiarySystemFill), lineWidth: lineWidth)

            Circle()
                .trim(from: 0, to: min(max(progress, 0), 1))
                .stroke(
                    Color.accentColor,
                    style: StrokeStyle(lineWidth: lineWidth, lineCap: .round)
                )
                .rotationEffect(.degrees(-90))   // start at 12 o'clock
                .animation(.spring(response: 0.6, dampingFraction: 0.9), value: progress)

            Text(progress, format: .percent.precision(.fractionLength(0)))
                .font(.system(.headline, design: .rounded, weight: .bold))
                .monospacedDigit()
        }
    }
}

No projects yet

Create your first project to see it here.

New project

Empty State

iOS 16.0

The screen most apps forget — icon, explanation, and one clear action.

struct EmptyStateView: View {
    let icon: String
    let title: String
    let message: String
    var actionTitle: String?
    var action: (() -> Void)?

    var body: some View {
        VStack(spacing: 14) {
            Image(systemName: icon)
                .font(.system(size: 44, weight: .light))
                .foregroundStyle(.tertiary)

            Text(title).font(.headline)

            Text(message)
                .font(.subheadline)
                .foregroundStyle(.secondary)
                .multilineTextAlignment(.center)
                .frame(maxWidth: 280)

            if let actionTitle, let action {
                Button(actionTitle, action: action)
                    .buttonStyle(.borderedProminent)
                    .padding(.top, 4)
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .padding(32)
    }
}

Something went wrong

We couldn’t reach the server. Check your connection.

↻ Try again

Error State

iOS 16.0

Failure view that explains what broke and offers a retry.

struct ErrorStateView: View {
    let message: String
    var retry: () -> Void

    var body: some View {
        VStack(spacing: 14) {
            Image(systemName: "exclamationmark.triangle.fill")
                .font(.system(size: 40))
                .foregroundStyle(.orange)

            Text("Something went wrong").font(.headline)

            Text(message)
                .font(.subheadline)
                .foregroundStyle(.secondary)
                .multilineTextAlignment(.center)
                .frame(maxWidth: 280)

            Button("Try again", systemImage: "arrow.clockwise", action: retry)
                .buttonStyle(.bordered)
                .padding(.top, 4)
        }
        .padding(32)
    }
}

AppearanceDark

Privacy

Settings Row

iOS 16.0

Tinted-icon navigation row — the building block of every settings screen.

struct SettingsRow: View {
    let icon: String
    let tint: Color
    let title: String
    var detail: String?

    var body: some View {
        HStack(spacing: 12) {
            Image(systemName: icon)
                .font(.system(size: 15, weight: .semibold))
                .foregroundStyle(.white)
                .frame(width: 30, height: 30)
                .background(tint, in: .rect(cornerRadius: 8))

            Text(title)

            Spacer(minLength: 8)

            if let detail {
                Text(detail).foregroundStyle(.secondary)
            }
            Image(systemName: "chevron.right")
                .font(.footnote.weight(.semibold))
                .foregroundStyle(.tertiary)
        }
        .padding(.vertical, 6)
        .contentShape(.rect)        // makes the whole row tappable
    }
}

Ahmed Gagan

Active now

Avatar Row

iOS 16.0

Async-loading avatar with initials fallback and a status dot.

struct AvatarRow: View {
    let name: String
    let subtitle: String
    let imageURL: URL?
    var isOnline = false

    private var initials: String {
        name.split(separator: " ").prefix(2)
            .compactMap { $0.first }.map(String.init).joined()
    }

    var body: some View {
        HStack(spacing: 12) {
            AsyncImage(url: imageURL) { phase in
                switch phase {
                case .success(let image):
                    image.resizable().scaledToFill()
                default:
                    // Initials fallback — never show an empty grey circle.
                    Text(initials)
                        .font(.subheadline.weight(.semibold))
                        .foregroundStyle(.white)
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .background(Color.accentColor)
                }
            }
            .frame(width: 44, height: 44)
            .clipShape(.circle)
            .overlay(alignment: .bottomTrailing) {
                if isOnline {
                    Circle()
                        .fill(.green)
                        .frame(width: 12, height: 12)
                        .overlay(Circle().strokeBorder(Color(.systemBackground), lineWidth: 2))
                }
            }

            VStack(alignment: .leading, spacing: 2) {
                Text(name).font(.subheadline.weight(.semibold))
                Text(subtitle).font(.caption).foregroundStyle(.secondary)
            }
        }
    }
}

Design review

Swipe Actions

iOS 16.0

Leading and trailing swipe actions with a full-swipe destructive default.

struct InboxList: View {
    @State private var items = ["Design review", "Ship v1.2", "Reply to Sam"]

    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                Text(item)
                    .swipeActions(edge: .trailing, allowsFullSwipe: true) {
                        Button(role: .destructive) {
                            items.removeAll { $0 == item }
                        } label: {
                            Label("Delete", systemImage: "trash")
                        }
                    }
                    .swipeActions(edge: .leading) {
                        Button {
                            // mark as done
                        } label: {
                            Label("Done", systemImage: "checkmark")
                        }
                        .tint(.green)
                    }
            }
        }
    }
}

ActivePendingFailed

Status Badge

iOS 16.0

Semantic pill for states — colour and label derived from one enum.

enum Status {
    case active, pending, failed

    var label: String {
        switch self {
        case .active:  "Active"
        case .pending: "Pending"
        case .failed:  "Failed"
        }
    }

    var tint: Color {
        switch self {
        case .active:  .green
        case .pending: .orange
        case .failed:  .red
        }
    }
}

struct StatusBadge: View {
    let status: Status

    var body: some View {
        HStack(spacing: 5) {
            Circle()
                .fill(status.tint)
                .frame(width: 6, height: 6)
            Text(status.label)
                .font(.caption.weight(.semibold))
        }
        .padding(.horizontal, 9)
        .padding(.vertical, 5)
        .background(status.tint.opacity(0.14), in: .capsule)
        .foregroundStyle(status.tint)
    }
}

99+

Count Badge

iOS 16.0

Notification counter that caps at 99+ and never distorts on wide numbers.

struct CountBadge: View {
    let count: Int

    var body: some View {
        if count > 0 {
            Text(count > 99 ? "99+" : "\(count)")
                .font(.caption2.weight(.bold))
                .monospacedDigit()
                .foregroundStyle(.white)
                .padding(.horizontal, 6)
                .frame(minWidth: 20, minHeight: 20)   // stays circular at 1 digit
                .background(.red, in: .capsule)
        }
    }
}

Custom Tab Bar

iOS 16.0

Floating glass tab bar with a spring-animated selection indicator.

struct CustomTabBar: View {
    @Binding var selection: Int
    let tabs: [(icon: String, label: String)]
    @Namespace private var ns

    var body: some View {
        HStack(spacing: 0) {
            ForEach(tabs.indices, id: \.self) { i in
                Button {
                    selection = i
                    UISelectionFeedbackGenerator().selectionChanged()
                } label: {
                    VStack(spacing: 4) {
                        Image(systemName: tabs[i].icon)
                            .font(.system(size: 18, weight: .semibold))
                            .symbolVariant(selection == i ? .fill : .none)
                        Text(tabs[i].label).font(.caption2.weight(.medium))
                    }
                    .foregroundStyle(selection == i ? Color.accentColor : .secondary)
                    .frame(maxWidth: .infinity)
                    .padding(.vertical, 8)
                    .background {
                        if selection == i {
                            Capsule()
                                .fill(Color.accentColor.opacity(0.12))
                                .matchedGeometryEffect(id: "tab", in: ns)
                        }
                    }
                }
                .buttonStyle(.plain)
            }
        }
        .padding(6)
        .background(.regularMaterial, in: .capsule)
        .shadow(color: .black.opacity(0.12), radius: 16, y: 6)
        .animation(.spring(response: 0.32, dampingFraction: 0.75), value: selection)
    }
}

Library

Components

Templates

Large Title Header

iOS 16.0

Collapsing large title with a trailing action — native behaviour, no hacks.

struct LibraryScreen: View {
    var body: some View {
        NavigationStack {
            List(1...30, id: \.self) { Text("Item \($0)") }
                .navigationTitle("Library")
                .navigationBarTitleDisplayMode(.large)
                .toolbar {
                    ToolbarItem(placement: .topBarTrailing) {
                        Button {
                            // add
                        } label: {
                            Image(systemName: "plus")
                        }
                    }
                }
                .toolbarBackground(.visible, for: .navigationBar)
                .toolbarBackground(.ultraThinMaterial, for: .navigationBar)
        }
    }
}

Pricing Card

iOS 16.0

Selectable plan tile with a “best value” flag and per-month breakdown.

struct PricingCard: View {
    let title: String
    let price: String
    let caption: String
    let isBestValue: Bool
    let isSelected: Bool
    var onTap: () -> Void

    var body: some View {
        Button(action: onTap) {
            HStack(spacing: 12) {
                Image(systemName: isSelected ? "checkmark.circle.fill" : "circle")
                    .font(.title3)
                    .foregroundStyle(isSelected ? Color.accentColor : .tertiary)

                VStack(alignment: .leading, spacing: 2) {
                    HStack(spacing: 6) {
                        Text(title).font(.headline)
                        if isBestValue {
                            Text("BEST VALUE")
                                .font(.system(size: 9, weight: .bold))
                                .padding(.horizontal, 6).padding(.vertical, 3)
                                .background(Color.accentColor, in: .capsule)
                                .foregroundStyle(.white)
                        }
                    }
                    Text(caption).font(.caption).foregroundStyle(.secondary)
                }

                Spacer(minLength: 8)
                Text(price).font(.headline.weight(.bold))
            }
            .padding(16)
            .background(Color(.secondarySystemBackground), in: .rect(cornerRadius: 14))
            .overlay {
                RoundedRectangle(cornerRadius: 14)
                    .strokeBorder(isSelected ? Color.accentColor : .clear, lineWidth: 2)
            }
        }
        .buttonStyle(.plain)
        .animation(.spring(response: 0.3, dampingFraction: 0.8), value: isSelected)
    }
}

Unlimited projects

Priority support

Team seats

Feature Row

iOS 16.0

Checkmark benefit line — the highest-converting element on any paywall.

struct FeatureRow: View {
    let text: String
    var included: Bool = true

    var body: some View {
        HStack(spacing: 10) {
            Image(systemName: included ? "checkmark.circle.fill" : "xmark.circle.fill")
                .foregroundStyle(included ? .green : .secondary)
            Text(text)
                .font(.subheadline)
                .foregroundStyle(included ? .primary : .secondary)
            Spacer(minLength: 0)
        }
    }
}

Free download

All 28 components as one Swift file

The same components you just scrolled through, in a single drop-in file. No package manager, no setup — paste it into any iOS 16+ project and use what you need.

28 components across 10 categories
Self-contained — zero dependencies
MIT licensed, commercial use fine
Buttons, cards, inputs, sheets, toasts, paywall rows

SwiftUI Component Libraries Compared

Stars and last-commit dates are pulled from GitHub and refresh daily, so this table does not go stale. “Last commit” is the column that matters most — an unmaintained UI dependency becomes your problem at the next iOS release.

Library	Best for	Stars	Last commit	Licence	Price	Min iOS
The Swift KitOURS	A full themeable design system + app foundation	—	—	Commercial	$99 one-time	16.0
SwiftUIX	Filling gaps in the standard library	8.2k	20d ago	MIT	Free	13.0
ComponentsKit	Ready-made, animated UI elements	182	2mo ago	MIT	Free	15.0
Pow	Drop-in transitions and effects	4.4k	4mo ago	Commercial	$99 lifetime	15.0
Swift Charts	Charts — first-party, no dependency	—	—	Apple SDK	Free	16.0
MarkdownUI	Rendering Markdown, incl. AI chat output	3.9k	8mo ago	MIT	Free	15.0
AlertToast	Apple-style toasts and HUDs	2.4k	1y ago	MIT	Free	13.0
Lottie	Designer-authored vector animations	26.9k	6d ago	Apache-2.0	Free	13.0
Inferno	Metal shaders as SwiftUI modifiers	2.9k	3mo ago	MIT	Free	17.0
Wave	Interruptible spring animations	2.4k	5mo ago	MIT	Free	14.0
SwiftUI-Introspect	Reaching the UIKit view underneath	6.5k	5d ago	MIT	Free	13.0

Star counts and commit dates fetched from the GitHub API · last verified 9 Sept 2026. A dash means the project is not on GitHub (Apple frameworks, our own kit) or the API was unavailable when this page was regenerated.

SwiftUI Component Categories — and Where to Get Each

Whatever you are building, these are the UI component categories an iOS app needs, and the best source for each:

Buttons & controls — native SwiftUI covers most; ComponentsKit and The Swift Kit add styled, themeable variants.
Cards & lists — design-system cards (The Swift Kit), SwiftUIX collections, native List and LazyVStack.
Forms & inputs — ComponentsKit inputs and native TextField with a design-system styling layer.
Sheets & modals — native .sheet plus ComponentsKit modal components.
Toasts & alerts — AlertToast for HUD-style toasts; native alert for confirmations.
Navigation & tab bars — native NavigationStack and TabView; The Swift Kit ships themed shells.
Loading & skeletons — Pow and SwiftUIX shimmer effects plus native ProgressView.
Charts — Swift Charts (Apple) for line, bar, area, and pie.
Animations & effects — Pow, Wave, Inferno, and Lottie for motion and visual flair.

Library, Build-Your-Own, or Boilerplate?

Three ways to get your components, and when each makes sense:

Use focused libraries — best when you need one capability (charts, animations, markdown). Add 3–5 and keep dependencies lean.
Build your own design system — best for brand control; SwiftUI primitives are short and tightly coupled to your look.
Start from a boilerplate — best when you want the whole app, not just components. The Swift Kit ships a centralized design system (buttons, cards, inputs, surfaces including Liquid Glass) plus paywall, auth, and onboarding, all re-skinnable from one file.

Which SwiftUI component library should you actually add?

Match the library to the gap, then stop. Adding SwiftUIX “just in case” is how binary size and API overlap get out of hand.

Need extra controls Apple never shipped (search bar, paging, collection layouts) → SwiftUIX or ComponentsKit, not both.
Need polish on taps, success, and list inserts → Pow. See the animation roundup for Lottie vs Rive vs native.
Need charts → Swift Charts. Third-party chart kits are rarely worth it on iOS 16+.
Need markdown in a chat or docs screen → MarkdownUI.
Need toasts → AlertToast. Native alert() is for confirmations, not HUDs.
Need a whole themed app (auth, paywall, onboarding, buttons that match) → The Swift Kit, then add Pow or MarkdownUI only if that screen is not already in the kit.

Every component above — themed, wired, yours to edit

The gallery is the free subset. The Swift Kit ships these plus auth, paywalls, onboarding and a setup CLI, all retheming from one DesignSystem.swift file.

Get The Swift Kit — $99

Short on time?

I can set the kit up for your app and hand back a running Xcode project — from $499. Source code still yours.

See done-for-you

The Best SwiftUI Component Libraries

The component libraries indie iOS developers actually reach for in 2026 — for real UI elements, not dev tooling. Free and open source unless noted.

1
The Swift Kit (Design System + Boilerplate)
Full design system
A complete, themeable SwiftUI design system — buttons, cards, inputs, surfaces (including Liquid Glass) — plus paywall, auth, onboarding, and AI, all re-skinnable from one file. $99 one-time.
Learn more
2
SwiftUIX
A large open-source superset of SwiftUI that adds hundreds of missing components and utilities — search bars, paging views, activity indicators, and richer collection layouts.
Pros
Huge surface area
Free & open source
Cons
Large dependency
3
ComponentsKit
UI components
An open-source UI component library for SwiftUI (and UIKit) — buttons, cards, inputs, checkboxes, modals, and loaders, all customizable and responsive.
Pros
Free
SwiftUI + UIKit
4
Pow
Animations
Drop-in animation and transition components — confetti, ripple, glow, shake, and change effects — added with a single modifier.
Pros
Drop-in modifiers
Production-tested
Cons
Paid ($99 lifetime)
5
Swift Charts (Apple)
Charts
Native iOS 16+ charting components — line, bar, area, scatter, and pie — with built-in accessibility and animation. Replaces third-party chart libraries.
Pros
Native
Accessibility built-in
Cons
iOS 16+ only
6
MarkdownUI
Text
Renders Markdown as native SwiftUI views with theming and code-block syntax highlighting. Essential for AI chat and docs screens.
7
AlertToast
Toasts & HUD
Lightweight toast and HUD components for SwiftUI — success, error, loading, and custom banners with a single modifier.
8
Lottie
Animations
Render After Effects animations as JSON-driven components — ideal for onboarding, empty states, and success animations handed off by designers.
9
Inferno
Effects
A library of Metal shaders packaged as SwiftUI view modifiers for advanced visual effects — gradients, noise, and custom transitions.
10
Wave
Animations
Spring-physics animation components beyond native SwiftUI — bouncy lists, gesture rebounds, and interactive, interruptible motion.
11
SwiftUI-Introspect
Utility
An escape hatch to reach the underlying UIKit/AppKit view when you need a component tweak Apple has not exposed in SwiftUI yet.
12
Explore SwiftUI (reference)
Free reference
Not a package, but a free, visual, copy-paste reference for every native SwiftUI component — the fastest way to find and use the right built-in view.
Learn more

Frequently Asked Questions

What is the best SwiftUI component library in 2026?

For ready-made UI elements, ComponentsKit and SwiftUIX are the strongest open-source picks, and Pow is the best for animations. If you want a complete, themeable design system plus a full app foundation (paywall, auth, onboarding), The Swift Kit bundles a component library with the rest of the app. Most indies combine a focused library or two with their own design system rather than one monolithic UI kit.

Is there a free SwiftUI component library?

Yes — SwiftUIX, ComponentsKit, MarkdownUI, AlertToast, and Apple's own Swift Charts are all free and open-source. Pow is paid ($99 lifetime) for its advanced animation effects. You can build a full app on free libraries alone.

What is the difference between a SwiftUI component library and a UI kit?

A component library gives you individual building blocks (buttons, cards, charts, toasts) that you assemble yourself. A UI kit or design system gives you a cohesive, themeable set of components designed to work together with consistent styling. The Swift Kit is the latter — a centralized design system — plus the surrounding app scaffolding.

Does The Swift Kit include a SwiftUI component library?

Yes. The Swift Kit ships a centralized SwiftUI design system — buttons, cards, inputs, surfaces (including Liquid Glass), plus paywall, onboarding, and chat components — all re-skinnable from a single DesignSystem.swift file. It is a component library and a full app foundation in one, for $99 one-time.

How do I add a SwiftUI component library to my Xcode project?

Most are distributed via Swift Package Manager: in Xcode, choose File → Add Package Dependencies, paste the library's GitHub URL, and add it to your target. Then import the module and use its views. The Swift Kit comes as a full project you clone, so its components are already wired in.

Should I use a SwiftUI component library or build components from scratch?

Use a library for anything generic and hard — charts, complex animations, markdown rendering. Build your own for brand-critical, simple components like buttons and cards, since SwiftUI makes them short. The pragmatic mix is a small set of focused libraries plus your own themeable design system, which is exactly what The Swift Kit gives you out of the box.

Which SwiftUI components do I need to ship an app?

At minimum: buttons and controls, cards and lists, forms and inputs, sheets and modals, navigation, loading states, and alerts or toasts — plus charts if your app is data-heavy. Native SwiftUI covers the basics; libraries fill the gaps. The Swift Kit ships all of these pre-styled so you start from a complete set.