Apple UI Documentation Index

Quick Navigation

Liquid Glass Design

Toolbar Features

API Quick Lookup

Liquid Glass APIs

TaskSwiftUIAppKit
Apply glass.glassEffect()NSGlassEffectView()
Set shape.glassEffect(in: .rect(cornerRadius: 16))glass.cornerRadius = 16
Add tint.glassEffect(.regular.tint(.blue))glass.tintColor = NSColor.blue
Make interactive.glassEffect(.regular.interactive())Custom mouse tracking
ContainerGlassEffectContainer { }NSGlassEffectContainerView()
Button style.buttonStyle(.glass)Custom GlassButton class
Morphing.glassEffectID("id", in: namespace)Manual animation

Toolbar APIs

TaskSwiftUI Code
Customizable toolbar.toolbar(id: "main") { }
Add itemToolbarItem(id: "save") { }
Add spacerToolbarSpacer(.flexible)
Minimize search.searchToolbarBehavior(.minimize)
Reposition system itemDefaultToolbarItem(kind: .search, placement: .bottomBar)
Transition source.matchedTransitionSource(id: "btn", in: namespace)

Decision Trees

When to Use Liquid Glass

Need glass effect?
├─ Single view → .glassEffect() / NSGlassEffectView
└─ Multiple views
   ├─ Need merging → Use Container
   └─ Independent → Individual glass effects

Choosing Framework

Platform target?
├─ iOS only → SwiftUI
├─ macOS only
│  ├─ Need AppKit integration → NSGlassEffectView
│  └─ Pure SwiftUI app → .glassEffect()
└─ Cross-platform → SwiftUI with platform checks

Performance Guidelines

ScenarioRecommendationMax Count
Static UIIndividual glass effects5-10
Dynamic listsContainer + lazy loading20-30
AnimationsDisable during transitionsN/A
ScrollingDisable glass when scrollingN/A

Common Tasks

Create Glass Button

Animate Glass Tint

  • SwiftUI: .glassEffect(.regular.tint(condition ? .blue : .clear))
  • AppKit: NSAnimationContext with animator().tintColor

Merge Glass Effects

  • SwiftUI: Wrap in GlassEffectContainer(spacing: 40)
  • AppKit: Use NSGlassEffectContainerView with spacing

Custom Toolbar

  • SwiftUI: .toolbar(id: "main") with ToolbarItem(id: "item")

Platform Requirements

FeatureiOS/iPadOSmacOSvisionOS
Liquid Glass17.0+14.0+1.0+
Customizable Toolbars17.0+14.0+N/A
Glass Button Style17.0+14.0+1.0+
Matched Transitions17.0+14.0+1.0+

Migration Guide

AppKit → SwiftUI

// AppKit
let glass = NSGlassEffectView()
glass.cornerRadius = 16
glass.tintColor = NSColor.blue

// SwiftUI equivalent
View()
    .glassEffect(.regular.tint(.blue), in: .rect(cornerRadius: 16))

Old Toolbar → New Toolbar

// Old
.toolbar {
    Button("Save") { }
}

// New (customizable)
.toolbar(id: "main") {
    ToolbarItem(id: "save") {
        Button("Save") { }
    }
}

Resources

Apple Documentation

Sample Projects

WWDC Sessions

  • Liquid Glass design principles
  • Toolbar customization in SwiftUI