A reference organizing SwiftUI components available in iOS 16 and later by function.
Directory Structure
swiftui-components/
├── SKILL.md (このファイル)
└── references/
├── navigation.md # ナビゲーション
├── charts.md # チャート・グラフ
├── scroll.md # スクロール
├── media.md # メディア・共有
├── animation.md # アニメーション
├── layout.md # レイアウト
├── tips.md # TipKit
├── preview.md # プレビュー
├── container.md # コンテナ値
├── theming.md # テーマ・デザイン
└── webview.md # WebView
Reference Files
references/navigation.md
Navigation-related components:
- NavigationStack (iOS 16+): Successor to NavigationView, programmatic navigation
- NavigationSplitView (iOS 16+): Supports 2-column/3-column layouts
- NavigationPath (iOS 16+): Navigation path supporting multiple types
- TabView Refresh (iOS 26+): New design and animations
references/charts.md
Chart and graph-related components:
- Swift Charts (iOS 16+): LineMark, BarMark, AreaMark, PointMark, etc.
- Chart3D (iOS 26+): Native support for 3D charts
references/scroll.md
Scroll-related components:
- scrollPosition (iOS 17+): Getting and setting scroll position
- scrollTargetBehavior (iOS 17+): Snap scrolling
- containerRelativeFrame (iOS 17+): Relative sizing with respect to the parent container
references/media.md
Media and sharing-related components:
- PhotosPicker (iOS 16+): Photo selection without requiring photo library access
- ShareLink (iOS 16+): SwiftUI support for the standard share feature
- Transferable (iOS 16+): Data transfer protocol
references/animation.md
Animation-related components:
- symbolEffect (iOS 17+): SF Symbols animations
- contentTransition (iOS 17+): Text/content change animations
- phaseAnimator (iOS 17+): Multi-phase animations
- keyframeAnimator (iOS 17+): Keyframe-based animations
- @Animatable (iOS 26+): Animation-enabled macros
references/layout.md
Layout-related components:
- Grid (iOS 16+): Flexible grid layouts
- ViewThatFits (iOS 16+): Automatic view selection based on space
- AnyLayout (iOS 16+): Dynamic layout switching
- Gauge (iOS 16+): Progress and level display
- Table (iOS 16+): Tabular data display (macOS/iPadOS)
- ToolbarSpacer (iOS 26+): Toolbar space control
- labelIconToTitleSpacing (iOS 26+): Label space adjustment
references/tips.md
TipKit framework:
- TipKit (iOS 17+): Feature discovery hint display
references/preview.md
Preview-related:
- #Preview (iOS 17+): Simplification of preview macros
- @Previewable (iOS 18+ / Xcode 16+): Using @State directly in previews
references/container.md
Container values and transactions:
- ContainerValues (iOS 18+): Value propagation from child to parent
- Transaction (iOS 18+): Animation control
references/theming.md
Theme and design:
- Liquid Glass (iOS 26+): Largest UI refresh since iOS 7
- .liquidGlass() (iOS 26+): Liquid Glass effect
- .depthLayer() (iOS 26+): Depth layer settings
references/webview.md
WebView-related:
- WebView (iOS 26+): SwiftUI native WebView
- Scene Bridging (iOS 26+): Integration of UIKit/AppKit and SwiftUI scenes
Version compatibility table (overview)
| Component | iOS | Notes |
|---|---|---|
| NavigationStack | 16+ | Successor to NavigationView |
| Swift Charts | 16+ | Declarative Charts |
| PhotosPicker | 16+ | Permission-free photo selection |
| Grid | 16+ | Flexible Grid |
| TipKit | 17+ | Feature discovery hints |
| scrollPosition | 17+ | Scroll position control |
| symbolEffect | 17+ | SF Symbols animation |
| #Preview | 17+ | Simple preview |
| ContainerValues | 18+ | Child-to-parent value passing |
| @Previewable | 18+ | @State in preview |
| Liquid Glass | 26+ | New design language |
| WebView | 26+ | Native WebView |
| @Animatable | 26+ | Animation macros |
| Chart3D | 26+ | 3D Charts |
How to use
When implementing a new UI
- Refer to the reference file corresponding to the feature you want to implement
- Check compatibility with the project's deployment target using the version compatibility table
- Implement by referring to the code examples
When looking for available components
- Check components at or below the deployment target using the version compatibility table
- Check the details in the corresponding reference file
Related skills
- swift-ios-migration: Migration guide (@Observable, Swift 6, etc.)
- swiftui-coding-guidelines: Coding guidelines
- swiftui-ssot: State management design