SettingsScreen

A complete settings screen built with DSSettingsScreen, DSSettingsSection and DSSettingsItem. Covers the most common settings patterns — notifications, appearance, account, danger zone.

Interactive Reference

Live showroom

Need the full visual surface?

Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().

Best for exploring:

variants, states, categories, and real app examples in one place.

Components used

DSSettingsScreen

Titled, scrollable list of sections

DSSettingsSection

Group with optional title and footer

DSSettingsItem

Row: navigation, toggle, value, action or destructive

DSProfileRow

Account header built from a DSUser

DSDangerZone

Irreversible actions with explanation

Full implementation

SettingsView.swift

import SwiftUI
import SwiftDS

struct SettingsView: View {
    @State private var notificationsEnabled = true
    @State private var darkModeEnabled = false
    @State private var showDeleteConfirmation = false

    var body: some View {
        DSSettingsScreen(title: "Settings", sections: [
            DSSettingsSection(title: "Preferences", items: [
                DSSettingsItem(
                    icon: "bell.fill",
                    title: "Push notifications",
                    type: .toggle(binding: $notificationsEnabled)
                ),
                DSSettingsItem(
                    icon: "moon.fill",
                    iconColor: DSColor.secondary,
                    title: "Dark mode",
                    type: .toggle(binding: $darkModeEnabled)
                ),
                DSSettingsItem(icon: "globe", title: "Language", type: .value(text: "English")),
            ]),
            DSSettingsSection(title: "Account", footer: "Signed in as jane@example.com", items: [
                DSSettingsItem(
                    icon: "lock.fill",
                    title: "Change password",
                    type: .navigation(destination: AnyView(ChangePasswordView()))
                ),
                DSSettingsItem(
                    icon: "doc.text",
                    title: "Privacy policy",
                    type: .navigation(destination: AnyView(PrivacyPolicyView()))
                ),
            ]),
            DSSettingsSection(items: [
                DSSettingsItem(
                    icon: "trash.fill",
                    iconColor: DSColor.error,
                    title: "Delete account",
                    type: .destructive(action: { showDeleteConfirmation = true })
                ),
            ]),
        ])
        .alert("Delete account?", isPresented: $showDeleteConfirmation) {
            Button("Cancel", role: .cancel) {}
            Button("Delete", role: .destructive) { deleteAccount() }
        } message: {
            Text("This action cannot be undone.")
        }
    }

    private func deleteAccount() { /* ... */ }
}

.navigation rows push their destination, so present SettingsView inside a NavigationStack.