swiftui-liquid-glass
Installation
SKILL.md
SwiftUI Liquid Glass
Use native Liquid Glass APIs on iOS 26+. Do not recreate the effect with materials, blurs, or shadows.
Core rules
- Don't build custom Liquid Glass through adding backgrounds, outlines, blurs and shadows.
- Buttons — style: use
.buttonStyle(.glass)for non-colored buttons, and.buttonStyle(.glassProminent)for tinted buttons..glassProminentsupports.tint(), but this can only be a color (not a gradient). - Buttons — shape: use
.buttonBorderShape()instead of applying a shape to the button label by hand. - Buttons — padding: using this button setup adds roughly 13pt of padding inside the liquid glass shape; keep this in mind when adapting designs.
- Custom views: use
.glassEffect(.regular, in: ...)to embed custom Views inside liquid glass containers. - Grouped glass: use
GlassEffectContainerwhen multiple liquid glass elements are next to each other. this View / Container adds a liquid merge effect when the elements grow / touch each other. - Scrolling: avoid using liquid glass inside ScrollView and List (anything that scrolls).
- Bottom bars: when anchoring a liquid glass View to the bottom of the screen, prefer embedding it in
.safeAreaBar(.bottom)instead of a VStack or.overlay(). safeAreaBar adds a subtle blur effect behind its content. - Toolbar items — no glass: on iOS 26+, navigation bar and window toolbar items get a shared Liquid Glass background by default. For items that should not show the glass capsule (plain icons, custom labels, status text, logos), apply
.sharedBackgroundVisibility(.hidden)on theToolbarItem, not on the inner view.