recipe

carousel

Paging ScrollView of cards.

carouselpagingscrollcardsguidance

On iPad

The same installed source at a regular width. It adapts its layout without a separate design.

Install

Nothing to install

Copy the snippet below. The native API is the whole treatment.

Usage

// cards is your own model collection; each element is Identifiable
// and has a title, a systemImage, and an amount.
ScrollView(.horizontal) {
    HStack(spacing: 12) {
        ForEach(cards) { card in
            VStack(alignment: .leading, spacing: 8) {
                Label(card.title, systemImage: card.systemImage)
                    .font(.subheadline.weight(.semibold))
                Text(card.amount, format: .currency(code: "KWD"))
                    .font(.title.monospacedDigit())
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding()
            .registrySurface()
            .containerRelativeFrame(.horizontal)
            .accessibilityElement(children: .combine)
            .accessibilityLabel("\(card.title) card")
        }
    }
    .scrollTargetLayout()
}
.scrollTargetBehavior(.paging)
.registryItem("carousel")

Why native is enough

ScrollView(.horizontal) + .scrollTargetLayout() + .scrollTargetBehavior(.paging); containerRelativeFrame(.horizontal) sizes pages. Alt: TabView + .tabViewStyle(.page). System owns paging, indicators, Reduce-Motion; no wrapper. Card MUST fill frame or stalls.

Accessibility contract

Paging: native; VoiceOver page-scroll, three-finger gesture.
Label each page; combined card SHOULD read as one element.

Details

Kind	recipe
Version	0.1.1
Platforms	iOS 26.0+
Dependencies	none
Source	none (native guidance)