> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vibetunnel.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# Swiftui

# Liquid Glass in SwiftUI

## Quick Reference

| Modifier/View          | Purpose                 | Parameters                    |
| ---------------------- | ----------------------- | ----------------------------- |
| `.glassEffect()`       | Apply glass to view     | `Glass`, `Shape`, `isEnabled` |
| `GlassEffectContainer` | Optimize multiple glass | `spacing`, `content`          |
| `.buttonStyle(.glass)` | Glass button style      | N/A                           |
| `.glassEffectID()`     | Morphing transitions    | `id`, `namespace`             |

## Basic Implementation

### Simple Glass Effect

```swift theme={null}
Text("Hello")
    .padding()
    .glassEffect()  // Default: regular glass, capsule shape
```

### Custom Shape & Tint

```swift theme={null}
Image(systemName: "star")
    .glassEffect(
        .regular.tint(.blue).interactive(),
        in: .rect(cornerRadius: 12)
    )
```

## Glass Variants

### Configuration Options

```swift theme={null}
// Regular glass
.glassEffect(.regular)

// With tint
.glassEffect(.regular.tint(.orange))

// Interactive (responds to touch)
.glassEffect(.regular.interactive())

// Combined
.glassEffect(.regular.tint(.blue).interactive())
```

## Container Usage

### Multiple Glass Views

```swift theme={null}
GlassEffectContainer(spacing: 40) {
    HStack(spacing: 40) {
        ForEach(items) { item in
            ItemView(item)
                .glassEffect()
        }
    }
}
```

### Union Effect

```swift theme={null}
@Namespace private var namespace

GlassEffectContainer {
    HStack {
        ForEach(items.indices, id: \.self) { index in
            ItemView(items[index])
                .glassEffect()
                .glassEffectUnion(
                    id: index < 2 ? "group1" : "group2",
                    namespace: namespace
                )
        }
    }
}
```

## Morphing Transitions

### Animated Morphing

```swift theme={null}
@State private var expanded = false
@Namespace private var namespace

GlassEffectContainer {
    if expanded {
        LargeView()
            .glassEffect()
            .glassEffectID("item", in: namespace)
    } else {
        SmallView()
            .glassEffect()
            .glassEffectID("item", in: namespace)
    }
}
.animation(.spring(), value: expanded)
```

## Button Styles

### Glass Buttons

```swift theme={null}
// Standard glass button
Button("Action") { }
    .buttonStyle(.glass)

// Prominent glass button
Button("Important") { }
    .buttonStyle(.glassProminent)
```

## Toolbar Integration

### Glass in Toolbar

```swift theme={null}
.toolbar {
    ToolbarItem(placement: .primaryAction) {
        Button("Save") { }
            .buttonStyle(.glass)
    }
}
```

### Custom Toolbar Background

```swift theme={null}
.toolbar {
    ToolbarItem(placement: .principal) {
        Text("Title")
            .sharedBackgroundVisibility(.hidden)
    }
}
```

## Advanced Techniques

### Conditional Glass

```swift theme={null}
@State private var glassEnabled = true

Text("Dynamic")
    .glassEffect(isEnabled: glassEnabled)
```

### Navigation Transitions

```swift theme={null}
@Namespace private var namespace

NavigationStack {
    Content()
        .toolbar {
            ToolbarItem {
                Button("Open") { }
                    .matchedTransitionSource(id: "btn", in: namespace)
            }
        }
        .sheet(isPresented: $show) {
            DetailView()
                .navigationTransition(.zoom(sourceID: "btn", in: namespace))
        }
}
```

## Performance Tips

1. **Container Usage**: Always wrap multiple glass views
2. **Spacing**: Smaller = merge closer, larger = merge farther
3. **Limit Count**: 5-10 glass effects maximum
4. **Disable When Hidden**: Use `isEnabled` parameter

## Common Patterns

| Pattern          | Implementation                              |
| ---------------- | ------------------------------------------- |
| Toggle glass     | `.glassEffect(isEnabled: condition)`        |
| Group merge      | `.glassEffectUnion(id:namespace:)`          |
| Custom shape     | `.glassEffect(in: .rect(cornerRadius: 20))` |
| State indication | `.tint(isActive ? .blue : .clear)`          |

## Platform Notes

* **iOS**: Bottom bar placement works well
* **iPadOS**: Consider larger touch targets
* **macOS**: Toolbar customization expected

## See Also

* [Overview](overview.md)
* [AppKit Implementation](appkit.md)
* [Common Patterns](patterns.md)
* [Apple Docs: glassEffect](https://developer.apple.com/documentation/SwiftUI/View/glassEffect)