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-08-19 10 min read By Ahmed Gagan, iOS Engineer

Quick Answer

The best SwiftUI component libraries in 2026 are a focused set: SwiftUIX and ComponentsKit for ready-made UI elements, Pow for animations, Swift Charts for charts, MarkdownUI for rich text, and AlertToast for toasts. For a complete, themeable design system plus a full app foundation (paywall, auth, onboarding), The Swift Kit bundles a component library with everything else. Most indies pair 3–5 focused libraries with their own design system rather than one monolithic 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	18d 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	5d 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.6k	3d ago	MIT	Free	13.0

Star counts and commit dates fetched from the GitHub API · last verified 7 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.

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.