# Swiftui Layout Components

Build SwiftUI layouts using stacks, grids, lists, scroll views, forms, and controls.

- Repository: https://github.com/dpearson2699/swift-ios-skills (1266 stars)
- Category: Design
- License: see repository
- Last updated: 2026-07-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add dpearson2699/swift-ios-skills --skill swiftui-layout-components -g -a claude-code -y`
Codex: `npx skills add dpearson2699/swift-ios-skills --skill swiftui-layout-components -g -a codex -y`
Cursor: `npx skills add dpearson2699/swift-ios-skills --skill swiftui-layout-components -g -a cursor -y`
Gemini CLI: `npx skills add dpearson2699/swift-ios-skills --skill swiftui-layout-components -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add dpearson2699/swift-ios-skills`

## Description

Build SwiftUI layouts using stacks, grids, lists, scroll views, forms, and controls. Covers VStack/HStack/ZStack, LazyVGrid/LazyHGrid, List with sections and swipe actions, ScrollView with ScrollPosition and scroll-driven reveal surfaces, Form with validation, Toggle/Picker/Slider, .searchable, and overlay patterns. Use when building data-driven layouts, collection views, paged detail reveals, settings screens, search interfaces, or transient overlay UI.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# SwiftUI Layout & Components

Layout and component patterns for SwiftUI apps targeting iOS 26+ with Swift 6.3. Covers stack and grid layouts, list patterns, scroll views, forms, controls, search, and overlays. Patterns are backward-compatible to iOS 17 unless noted.

## Contents

- [Layout Fundamentals](#layout-fundamentals)
- [Grid Layouts](#grid-layouts)
- [List Patterns](#list-patterns)
- [ScrollView](#scrollview)
- [Form and Controls](#form-and-controls)
- [Searchable](#searchable)
- [Overlay and Presentation](#overlay-and-presentation)
- [Common Mistakes](#common-mistakes)
- [Review Checklist](#review-checklist)
- [References](#references)

## Layout Fundamentals

### Standard Stacks

Use `VStack`, `HStack`, and `ZStack` for small, fixed-size content. They render all children immediately.

```swift
VStack(alignment: .leading) {
    Text(title).font(.headline)
    Text(subtitle).font(.subheadline).foregroundStyle(.secondary)
}
```

### Lazy Stacks

Use `LazyVStack` and `LazyHStack` inside `ScrollView` for large or dynamic collections. They create child views on demand as they scroll into view.

```swift
ScrollView {
    LazyVStack {
        ForEach(items) { item in
            ItemRow(item: item)
        }
    }
    .padding(.horizontal)
}
```

**When to use which:**
- **Non-lazy stacks:** Small, fixed content (headers, toolbars, forms with few fields)
- **Lazy stacks:** Large or unknown-size collections, feeds, chat messages

## Grid Layouts

Use `LazyVGrid` for icon pickers, media galleries, and dense visual selections. Use `.adaptive` columns for layouts that scale across device sizes, or `.flexible` columns for a fixed column count.

```swift
// Adaptive grid -- columns adjust to fit
let columns = [GridItem(.adaptive(minimum: 120, maximum: 1024))]

LazyVGrid(columns: columns) {
    ForEach(items) { item in
        ThumbnailView(item: item)
            .aspectRatio(1, contentMode: .fit)
    }
}
```

The rest: https://github.com/dpearson2699/swift-ios-skills/blob/HEAD/skills/swiftui-layout-components/SKILL.md