← ClaudeAtlas

ios26-liquid-glasslisted

Use when implementing the iOS 26 Liquid Glass material in SwiftUI, UIKit, or WidgetKit. Covers glassEffect variants, GlassEffectContainer, glassEffectID/glassEffectUnion morphing, UIGlassEffect/UIGlassContainerEffect, scroll edge effects, and widget accented rendering.
Mixard/fable-pack · ★ 1 · AI & Automation · score 74
Install: claude install-skill Mixard/fable-pack
# iOS 26 Liquid Glass Liquid Glass is the iOS 26 dynamic material: it blurs content behind it, reflects surrounding color and light, and can react to touch and pointer interaction. APIs exist for SwiftUI, UIKit, and WidgetKit. ## SwiftUI ### glassEffect ```swift Text("Hello, World!") .font(.title) .padding() .glassEffect() // default: .regular variant, capsule shape ``` Customized: ```swift Text("Hello, World!") .font(.title) .padding() .glassEffect(.regular.tint(.orange).interactive(), in: .rect(cornerRadius: 16.0)) ``` - `.regular` — standard glass - `.tint(Color)` — color tint for prominence - `.interactive()` — reacts to touch/pointer; opt-in, use only on elements that respond to interaction - Shapes: `.capsule` (default), `.rect(cornerRadius:)`, `.circle` Apply `.glassEffect()` after other appearance modifiers (frame, font, padding). ### Button styles ```swift Button("Click Me") { }.buttonStyle(.glass) Button("Important") { }.buttonStyle(.glassProminent) ``` ### GlassEffectContainer Wrap multiple sibling glass views in a container — it improves rendering performance and enables shape merging and morphing. Multiple standalone `.glassEffect()` siblings without a container is the main performance mistake. ```swift GlassEffectContainer(spacing: 40.0) { HStack(spacing: 40.0) { Image(systemName: "scribble.variable") .frame(width: 80.0, height: 80.0) .font(.system(size: 36)) .glassEffect()