---
title: balochcodes/liquidglassdock
framework: Swift Package Catalog
role: article
path: packages/balochcodes/liquidglassdock
---

# balochcodes/liquidglassdock

An interactive, floating glassmorphic macOS & iPadOS style dock for **SwiftUI** featuring smooth magnetic proximity magnification, playful tap bounce physics, and notification badge counters.

## ✨ Features

- 🧲 **Magnetic Proximity Magnification:** Smooth Gaussian/cosine proximity curve dynamically magnifies icons as the user's finger or cursor drags across the dock. - 🪟 **Frosted Glassmorphism:** Dual-layer translucent frosted glass container with specular edge shine and soft drop shadow. - 🦘 **Playful Spring Tap Bounce:** Tapping any dock icon triggers an authentic macOS-style vertical spring bounce. - 🔴 **Notification Badges & Active Dots:** Native numeric counter badges (e.g. unread count) and subtle running app indicator dots. - 📳 **Tactile Haptic Feedback:** Subtle selection clicks while hovering across items (iOS). - 🎨 **Deep Theming:** Configure icon sizes, magnification scale, proximity range, and glass blur via `DockTheme`. - ⚡ **Zero External Dependencies:** Built 100% on native SwiftUI primitives.

---

## 📦 Installation

### In Xcode (Recommended) 1. Open your project in Xcode and go to **File** ➔ **Add Package Dependencies...** 2. In the search box, paste:    ```text    https://github.com/BalochCodes/LiquidGlassDock.git    ``` 3. Select **Up to Next Major Version** (`1.0.0`) and click **Add Package**.

### In `Package.swift` Add `LiquidGlassDock` to your `dependencies`:

```swift dependencies: [     .package(url: "https://github.com/BalochCodes/LiquidGlassDock.git", from: "1.0.0") ] ```

Import the framework:

```swift import SwiftUI import LiquidGlassDock ```

---

## 🚀 Usage Examples

### 1. macOS Style Floating Navigation Dock

```swift import SwiftUI import LiquidGlassDock

struct MainWorkspaceView: View {     @State private var selectedTab = "Finder"

var body: some View {         ZStack(alignment: .bottom) {             Color(red: 0.1, green: 0.12, blue: 0.18).ignoresSafeArea()

Text("Current View: \(selectedTab)")                 .font(.title2.bold())                 .foregroundColor(.white)                 .frame(maxHeight: .infinity)

LiquidGlassDockView(                 items: [                     DockItem(title: "Finder", systemImage: "macwindow", iconTint: .cyan, showActiveDot: true) {                         selectedTab = "Finder"                     },                     DockItem(title: "Messages", systemImage: "message.fill", iconTint: .green, badgeCount: 3) {                         selectedTab = "Messages"                     },                     DockItem(title: "Mail", systemImage: "envelope.fill", iconTint: .blue, badgeCount: 9) {                         selectedTab = "Mail"                     },                     DockItem(title: "Music", systemImage: "music.note", iconTint: .red, showActiveDot: true) {                         selectedTab = "Music"                     },                     DockItem(title: "Settings", systemImage: "gearshape.fill", iconTint: .white) {                         selectedTab = "Settings"                     }                 ]             )             .padding(.bottom, 24)         }     } } ```

---

### 2. iPadOS Floating Media Control Dock

```swift LiquidGlassDockView(     items: [         DockItem(title: "Previous", systemImage: "backward.fill", iconTint: .white),         DockItem(title: "Play", systemImage: "play.fill", iconTint: .green),         DockItem(title: "Next", systemImage: "forward.fill", iconTint: .white),         DockItem(title: "Shuffle", systemImage: "shuffle", iconTint: .purple),         DockItem(title: "AirPlay", systemImage: "airplayaudio", iconTint: .blue)     ],     theme: DockTheme(         baseItemSize: 44,         maxMagnification: 1.45,         dockCornerRadius: 24     ) ) ```

---

### 3. Custom Glass Theming

```swift let customTheme = DockTheme(     baseItemSize: 52.0,     maxMagnification: 1.65,     magnificationRange: 140.0,     itemSpacing: 14.0,     glassColor: Color(red: 0.14, green: 0.18, blue: 0.28).opacity(0.65),     borderColor: Color.blue.opacity(0.35),     dockCornerRadius: 28.0,     activeDotColor: Color.cyan,     badgeColor: Color.orange )

LiquidGlassDockView(items: dockItems, theme: customTheme) ```

---

## 🛠️ API Reference

### `LiquidGlassDockView`

| Property | Type | Default | Description | | :--- | :--- | :--- | :--- | | `items` | `[DockItem]` | **Required** | The ordered list of items rendered in the dock. | | `theme` | `DockTheme` | `DockTheme()` | Styling and proximity magnification parameters. |

### `DockItem`

| Property | Type | Default | Description | | :--- | :--- | :--- | :--- | | `title` | `String` | **Required** | Accessible label/title of the dock icon. | | `systemImage` | `String` | **Required** | SF Symbol icon name displayed inside the tile. | | `iconTint` | `Color` | `.white` | Color tint for the SF Symbol icon. | | `badgeCount` | `Int?` | `nil` | Optional numeric notification counter. | | `showActiveDot` | `Bool` | `false` | Displays a running dot indicator beneath the item. | | `action` | `() -> Void` | `{}` | Callback fired when the item is tapped. |

### `DockTheme`

| Property | Type | Default | Description | | :--- | :--- | :--- | :--- | | `baseItemSize` | `CGFloat` | `48.0` | Default width/height of unmagnified icon tiles. | | `maxMagnification` | `CGFloat` | `1.55` | Peak scale factor reached directly under touch. | | `magnificationRange` | `CGFloat` | `120.0` | Touch distance in points over which magnification tapers. | | `itemSpacing` | `CGFloat` | `12.0` | Spacing between individual dock icon tiles. | | `glassColor` | `Color` | `Color.black.opacity(0.35)` | Translucent frosted glass background fill. | | `borderColor` | `Color` | `Color.white.opacity(0.20)` | Specular highlight border color. | | `dockCornerRadius` | `CGFloat` | `26.0` | Outer container corner radius. | | `enableBounceOnTap` | `Bool` | `true` | Enables vertical spring bounce animation on tap. |

---

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

### Author Created by [Shahzain Baloch](https://github.com/ShahzainBaloch).

## Package Metadata

Repository: balochcodes/liquidglassdock

Default branch: main

README: README.md