Готовий код

import SwiftUI

struct LinenCheckoutStack: View {
    private let accent = Color.green

    var body: some View {
        HStack(spacing: 18) {
            VStack(alignment: .leading, spacing: 16) {
                Text("Linen Checkout Stack")
                    .font(.system(size: 30, weight: .bold, design: .rounded))

                ForEach(["Shipping details", "Payment method", "Delivery note"], id: \.self) { section in
                    RoundedRectangle(cornerRadius: 24, style: .continuous)
                        .fill(Color.white)
                        .frame(height: 92)
                        .overlay(alignment: .leading) {
                            VStack(alignment: .leading, spacing: 8) {
                                Text(section)
                                    .font(.headline)
                                Text("Bright fields and compact helper text keep the flow moving.")
                                    .font(.footnote)
                                    .foregroundStyle(.secondary)
                            }
                            .padding(18)
                        }
                }
            }

            VStack(alignment: .leading, spacing: 14) {
                Text("Order recap")
                    .font(.headline)
                RoundedRectangle(cornerRadius: 28, style: .continuous)
                    .fill(accent.opacity(0.16))
                    .frame(height: 220)
                    .overlay(alignment: .topLeading) {
                        VStack(alignment: .leading, spacing: 10) {
                            Text("$248.00")
                                .font(.system(size: 36, weight: .bold, design: .rounded))
                            Text("Estimated total")
                                .foregroundStyle(.secondary)
                        }
                        .padding(20)
                    }
            }
            .frame(width: 260)
            .padding(18)
            .background(Color.white, in: RoundedRectangle(cornerRadius: 30, style: .continuous))
        }
        .padding(24)
        .background(Color(.systemGroupedBackground))
    }
}

Linen Checkout Stack

A clean commerce checkout shell with step tracking and embedded order recap.

Ціна

безкоштовно

Комерція

Творець

Поділіться

Поділитися на XLinkedInReddit
Linen Checkout Stack preview

Останнє оновлення

Затверджено

18 бер. 2026 р.

Версія 1 · Linen Checkout Stack

Refined spacing and added alternate promo-code drawer.

Творець: Demo Creator

Переглянути всі