Theme → shell → block → screen → your data

Step 0

Add both packages

Foundation is free (MIT). Pro is a commercial license with private GitHub access after purchase.

dependencies: [
    .package(url: "https://github.com/NerdSnipe-Inc/design-foundation", from: "1.1.0"),
    // Pro: private repo URL provided with your license
],
targets: [
    .target(name: "YourApp", dependencies: [
        "DesignFoundation",
        "DesignFoundationPro"
    ])
]

Step 1

Apply theme at the root

One modifier at the app root themes every primitive, block, and screen below it.

import DesignFoundation
import DesignFoundationPro

WindowGroup {
    AppRootView()
        .environment(\.dfTheme, .workspace) // product apps
        // or: .dfThemePreset(.slate)
}

Explore presets on the Theme Presets page. Custom brands: mutate any token on DFTheme — colors, spacing, radius, typography.

Step 2

Pick a shell — or a composition root

Shells are layout-only: sidebars, tabs, split views. Composition roots are full reference apps already wired — faster if your product matches a vertical.

DFCRMRootView(
    deals: viewModel.deals,
    contacts: viewModel.contacts
)
.environment(\.dfTheme, .workspace)
.environment(\.dfUseDesktopDensity, DFLayout.useDesktopLayout(horizontalSizeClass: sizeClass))
.dfToastHost()

See all 9 composition examples on the Pro page and in DFPlayground.

Step 3

Compose blocks

Blocks are partial UI — stat cards, auth forms, charts, empty states. Drop them inside any shell or custom layout.

VStack(spacing: theme.spacing.lg) {
    DFMetricGridBlock(configuration: .init(metrics: viewModel.kpis))
    DFLineChartBlock(configuration: .init(
        title: "Active users",
        data: viewModel.trend,
        selectedPeriod: viewModel.period,
        isLoading: viewModel.isLoading
    ))
}

Step 4

Use reference screens

Full pages with typed Configuration structs — connect closures to your view model.

DFEcommerceOrdersScreen(
    configuration: .init(
        orders: viewModel.orders,
        onSelectOrder: { viewModel.open($0) },
        onMarkShipped: { viewModel.markShipped($0) }
    )
)

Step 5

Wire your data

Replace preview fixtures with your API models. Keep theme tokens and DesignKit colors — avoid inline hex in your app layer.

// Success feedback (toast host at root)
DFToastQueue.shared.show(text: "Saved", severity: .success)

// Forms: DFFormState + DFValidatedTextField (Foundation)
// Pro auth blocks: usesFormValidation: true by default

Choose your path

Three ways in — pick your depth

Not sure which vertical fits? Browse the Use Cases page — or see The Foundation Way for line-count comparisons.

Before you ship

Integration checklist

• .environment(\.dfTheme, .workspace) or brand preset at root
• dfUseDesktopDensity on product-shaped roots
• .dfToastHost() on composition roots
• Loading + empty states for data-driven screens
• No hardcoded colors — theme + vertical DesignKit only