First screen

Compose a small interface from released FreakUI contracts.

FreakUI components express interface meaning while your application owns its data and actions. This example combines navigation, grouping, a surfaced value, progress, and an action.

DashboardView.swift
import FreakUI
import SwiftUI

struct DashboardView: View {
    var body: some View {
        FViewLayout(
            role: .parent,
            title: "Dashboard",
            displayMode: .large,
            navigationBarStyle: .solid
        ) {
            ScrollView {
                FSection(
                    heading: .titleAndSubtitle(
                        title: "Today",
                        subtitle: "Your current progress"
                    )
                ) {
                    FContainer(appearance: .elevated) {
                        VStack(alignment: .leading, spacing: .paddingStandard) {
                            FDataLabel(
                                value: .double(2_450, format: .compact),
                                label: .string("kcal"),
                                icon: "flame.fill"
                            )

                            FProgress(
                                value: 2_450,
                                total: 3_000,
                                accessibilityLabel: "Daily calorie progress"
                            )

                            FButton(
                                horizontalSizingMode: .fillContainer,
                                title: "Add entry"
                            ) {
                                addEntry()
                            }
                        }
                    }
                }
                .padding(.paddingStandard)
            }
        }
    }

    private func addEntry() {}
}

Why the pieces are separate

  • FViewLayout owns the established navigation treatment for the screen relationship.
  • FSection owns semantic heading hierarchy, not an arbitrary card.
  • FContainer owns the composed surface and tokenized spacing.
  • FDataLabel formats a typed value consistently.
  • FProgress receives an explicit accessibility label.
  • FButton reports user intent; your application owns the mutation.

Choose semantics before style

Prefer a component because its meaning and state contract fit. Use FDataRow for label-left/value-right data, FCallout for persistent semantic information, and FEmptyView for a complete empty state. Matching padding alone is not a reason to interchange them.

Next, review tokens and sizing or browse the component reference, beginning with Button.