@ajuarezso/capacitor-liquid-glass 0.1.0

package/CapacitorLiquidGlass.podspec

@@ -0,0 +1,17 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name = 'CapacitorLiquidGlass'
+  s.version = package['version']
+  s.summary = package['description']
+  s.license = package['license']
+  s.homepage = 'https://github.com/anthonyjuarezsolis/capacitor-liquid-glass'
+  s.author = package['author']
+  s.source = { :git => 'https://github.com/anthonyjuarezsolis/capacitor-liquid-glass.git', :tag => s.version.to_s }
+  s.source_files = 'ios/Sources/**/*.{swift,h,m}'
+  s.ios.deployment_target = '15.0'
+  s.dependency 'Capacitor'
+  s.swift_version = '5.9'
+end

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Anthony Juarez Solis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/Package.swift

@@ -0,0 +1,26 @@
+// swift-tools-version: 5.9
+
+import PackageDescription
+
+let package = Package(
+    name: "AjuarezsoCapacitorLiquidGlass",
+    platforms: [.iOS(.v15)],
+    products: [
+        .library(
+            name: "AjuarezsoCapacitorLiquidGlass",
+            targets: ["LiquidGlassPlugin"])
+    ],
+    dependencies: [
+        .package(url: "https://github.com/ionic-team/capacitor-swift-pm.git", from: "8.0.0")
+    ],
+    targets: [
+        .target(
+            name: "LiquidGlassPlugin",
+            dependencies: [
+                .product(name: "Capacitor", package: "capacitor-swift-pm"),
+                .product(name: "Cordova", package: "capacitor-swift-pm"),
+            ],
+            path: "ios/Sources/LiquidGlassPlugin"
+        )
+    ]
+)

package/README.md

@@ -0,0 +1,150 @@
+# @ajuarezso/capacitor-liquid-glass
+
+Native iOS 26 **Liquid Glass** chrome (TabBar, NavigationBar, Alerts, Sheets, Menus) for Capacitor apps. Falls back gracefully on iOS < 26 and Android (no-op), so your app keeps its own CSS chrome on unsupported platforms.
+
+This plugin exists because, as of 2026, no existing Capacitor plugin exposes the real iOS 26 `.glassEffect()` rendered by UIKit — only CSS `backdrop-filter` approximations. This plugin floats a real `UITabBar` (and friends) as a native overlay above your `WKWebView`, so you get the actual Apple-native morphing, refraction, and tint animations of Liquid Glass on iOS 26+.
+
+> Status: `0.1.0` — **TabBar only**. NavigationBar, Toolbar, Sheet, Alert, Menu, Popover are on the roadmap.
+
+## Install
+
+```bash
+npm install @ajuarezso/capacitor-liquid-glass
+npx cap sync ios
+```
+
+iOS minimum target: `15.0`. Real Liquid Glass requires **iOS 26+**; on older versions the native `UITabBar` still renders but without the Liquid Glass effect.
+
+## Quick start
+
+```ts
+import { LiquidGlass } from '@ajuarezso/capacitor-liquid-glass';
+
+// Show the native tab bar
+await LiquidGlass.showTabBar({
+  items: [
+    { id: '/home',    label: 'Home',    sfSymbol: 'house' },
+    { id: '/search',  label: 'Search',  sfSymbol: 'magnifyingglass' },
+    { id: '/cart',    label: 'Cart',    sfSymbol: 'bag', badge: '3' },
+    { id: '/profile', label: 'Profile', sfSymbol: 'person' },
+  ],
+  selectedIndex: 0,
+  tintColor: '#FA7319',
+});
+
+// Listen for taps
+await LiquidGlass.addListener('tabSelected', ({ id, index }) => {
+  console.log('Tab tapped:', id, index);
+});
+
+// Update badge without rebuilding the tab bar
+await LiquidGlass.updateTabBadge({ id: '/cart', badge: '5' });
+
+// Programmatically change the selected tab
+await LiquidGlass.setSelectedTab({ id: '/profile' });
+
+// Hide (e.g. when opening a fullscreen modal)
+await LiquidGlass.hideTabBar();
+```
+
+## API
+
+### `showTabBar(options)`
+
+| Option          | Type                    | Required | Description                                                 |
+| --------------- | ----------------------- | -------- | ----------------------------------------------------------- |
+| `items`         | `LiquidGlassTabItem[]`  | yes      | At least one item.                                          |
+| `selectedIndex` | `number`                | no       | Initial selection. Defaults to `0`.                         |
+| `tintColor`     | `string` (`#RRGGBB`)    | no       | Color of the selected pill. Defaults to the system tint.    |
+
+### `LiquidGlassTabItem`
+
+```ts
+interface LiquidGlassTabItem {
+  /** Stable id emitted in `tabSelected` events. */
+  id: string;
+  /** Text under the icon. */
+  label: string;
+  /** SF Symbol name (e.g. 'house.fill'). */
+  sfSymbol: string;
+  /** Optional badge value (e.g. '3' or '•'). */
+  badge?: string;
+}
+```
+
+### `hideTabBar()`
+
+Hides the tab bar without destroying it. Use this when opening fullscreen modals, maps, or any UI that should temporarily own the screen. Call `showTabBar(...)` again to restore it.
+
+### `setSelectedTab({ index?, id? })`
+
+Updates the selected tab programmatically. Useful when the user navigates via a deep link, a button inside a page, or any source other than the tab bar itself.
+
+### `updateTabBadge({ id, badge })`
+
+Updates a single tab's badge **without** reconfiguring the whole bar (preserves selection). Pass an empty string or omit `badge` to clear.
+
+### `getTabBarLayout()`
+
+Returns the current `{ height, bottomSafeArea }` in points so you can reserve content padding.
+
+### Events
+
+| Event                  | Payload                                     |
+| ---------------------- | ------------------------------------------- |
+| `tabSelected`          | `{ index: number, id: string }`             |
+| `tabBarLayoutChanged`  | `{ height: number, bottomSafeArea: number }` |
+
+## Angular example
+
+```ts
+import { bindLiquidGlassNav } from './liquid-glass-nav';
+
+export class CustomerLayout {
+  private readonly nav = bindLiquidGlassNav({
+    items: [
+      { id: '/home',    label: 'Home',    sfSymbol: 'house' },
+      { id: '/orders',  label: 'Orders',  sfSymbol: 'list.bullet.clipboard' },
+      { id: '/profile', label: 'Profile', sfSymbol: 'person' },
+    ],
+    isFullscreen: this.isFullscreen, // signal<boolean>
+  });
+
+  readonly useNativeTabBar = this.nav.useNativeTabBar;
+}
+```
+
+See the `example/` folder for a full wiring including router sync and HTML fallback for unsupported platforms.
+
+## Platform behavior
+
+| Widget       | iOS 26+              | iOS 15–25           | Android | Web        |
+| ------------ | -------------------- | ------------------- | ------- | ---------- |
+| TabBar       | ✅ Liquid Glass real | ⚠️ Classic UITabBar | ❌ no-op | ❌ no-op   |
+
+When the plugin is a no-op (Android, Web, iOS &lt; 26), render your own HTML / CSS fallback. The plugin exposes `Capacitor.getPlatform()` and your Angular / React code can conditionally swap to a `backdrop-filter` bar.
+
+## Why not just CSS `backdrop-filter`?
+
+Because it's not the same thing.
+
+- **CSS `backdrop-filter`** gives you blur. That's it.
+- **Liquid Glass** gives you blur + *dynamic refraction*, *edge highlights that shift with content*, *morphing between elements*, *touch-reactive deformation*, *tinted / clear variants*, and system-level Dynamic Island integration. These require private Metal shaders that Apple does not expose to `WKWebView`.
+
+This plugin is the shortest path to Apple-authentic Liquid Glass from a Capacitor app.
+
+## Roadmap
+
+- [x] `TabBar`
+- [ ] `NavigationBar` (large title, leading/trailing items)
+- [ ] `Toolbar` (floating toolbar like Safari)
+- [ ] `Alert` (standard and destructive)
+- [ ] `Sheet` (with detents)
+- [ ] `Menu` / `Popover`
+- [ ] Android Material 3 Expressive equivalents
+
+PRs welcome.
+
+## License
+
+MIT © Anthony Juarez Solis

package/dist/esm/definitions.d.ts

@@ -0,0 +1,56 @@
+import type { PluginListenerHandle } from '@capacitor/core';
+export interface LiquidGlassTabItem {
+    /** Stable id used in tab selection events. */
+    id: string;
+    /** Label rendered under the icon. */
+    label: string;
+    /** SF Symbol name for iOS (e.g. "house.fill"). */
+    sfSymbol: string;
+    /** Optional badge value (e.g. "3" or "•"). */
+    badge?: string;
+}
+export interface ShowTabBarOptions {
+    items: LiquidGlassTabItem[];
+    /** Index of the initially selected item. Defaults to 0. */
+    selectedIndex?: number;
+    /** Tint color for selected state, hex "#RRGGBB". Defaults to iOS system tint. */
+    tintColor?: string;
+}
+export interface SetSelectedTabOptions {
+    /** Either pass numeric index or the item id. */
+    index?: number;
+    id?: string;
+}
+export interface UpdateTabBadgeOptions {
+    /** Tab item id whose badge should change. */
+    id: string;
+    /** New badge value; pass empty string or omit to clear it. */
+    badge?: string;
+}
+export interface TabSelectedEvent {
+    index: number;
+    id: string;
+}
+export interface TabBarLayoutEvent {
+    /** Total height of the tab bar including internal padding (pt). */
+    height: number;
+    /** Safe-area bottom inset the tab bar is sitting on (pt). */
+    bottomSafeArea: number;
+}
+export interface LiquidGlassPlugin {
+    /** Creates (or updates) and shows the native Liquid Glass tab bar. */
+    showTabBar(options: ShowTabBarOptions): Promise<void>;
+    /** Hides the tab bar without destroying configuration. */
+    hideTabBar(): Promise<void>;
+    /** Updates the currently selected tab. */
+    setSelectedTab(options: SetSelectedTabOptions): Promise<void>;
+    /** Updates a single tab's badge without reconfiguring the whole bar. */
+    updateTabBadge(options: UpdateTabBadgeOptions): Promise<void>;
+    /** Current layout of the tab bar (height + safe area). */
+    getTabBarLayout(): Promise<TabBarLayoutEvent>;
+    /** Emitted every time the user taps a tab. */
+    addListener(eventName: 'tabSelected', listenerFunc: (event: TabSelectedEvent) => void): Promise<PluginListenerHandle>;
+    /** Emitted when the tab bar's height or safe-area changes (rotation, etc.). */
+    addListener(eventName: 'tabBarLayoutChanged', listenerFunc: (event: TabBarLayoutEvent) => void): Promise<PluginListenerHandle>;
+    removeAllListeners(): Promise<void>;
+}

package/dist/esm/definitions.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/index.d.ts

@@ -0,0 +1,4 @@
+import type { LiquidGlassPlugin } from './definitions';
+declare const LiquidGlass: LiquidGlassPlugin;
+export * from './definitions';
+export { LiquidGlass };

package/dist/esm/index.js

@@ -0,0 +1,6 @@
+import { registerPlugin } from '@capacitor/core';
+const LiquidGlass = registerPlugin('LiquidGlass', {
+    web: () => import('./web').then((m) => new m.LiquidGlassWeb()),
+});
+export * from './definitions';
+export { LiquidGlass };

package/dist/esm/web.d.ts

@@ -0,0 +1,15 @@
+import { WebPlugin } from '@capacitor/core';
+import type { LiquidGlassPlugin, SetSelectedTabOptions, ShowTabBarOptions, TabBarLayoutEvent, UpdateTabBadgeOptions } from './definitions';
+/**
+ * Web fallback — real Liquid Glass requires native iOS 26. On the web we
+ * resolve no-ops so the app can run in the browser during development; the
+ * Angular shell is expected to render its own CSS glassmorphism tab bar when
+ * `isNativePlatform()` is false.
+ */
+export declare class LiquidGlassWeb extends WebPlugin implements LiquidGlassPlugin {
+    showTabBar(_options: ShowTabBarOptions): Promise<void>;
+    hideTabBar(): Promise<void>;
+    setSelectedTab(_options: SetSelectedTabOptions): Promise<void>;
+    updateTabBadge(_options: UpdateTabBadgeOptions): Promise<void>;
+    getTabBarLayout(): Promise<TabBarLayoutEvent>;
+}

package/dist/esm/web.js

@@ -0,0 +1,24 @@
+import { WebPlugin } from '@capacitor/core';
+/**
+ * Web fallback — real Liquid Glass requires native iOS 26. On the web we
+ * resolve no-ops so the app can run in the browser during development; the
+ * Angular shell is expected to render its own CSS glassmorphism tab bar when
+ * `isNativePlatform()` is false.
+ */
+export class LiquidGlassWeb extends WebPlugin {
+    async showTabBar(_options) {
+        // no-op on web
+    }
+    async hideTabBar() {
+        // no-op on web
+    }
+    async setSelectedTab(_options) {
+        // no-op on web
+    }
+    async updateTabBadge(_options) {
+        // no-op on web
+    }
+    async getTabBarLayout() {
+        return { height: 0, bottomSafeArea: 0 };
+    }
+}

package/dist/plugin.cjs.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var core = require('@capacitor/core');
+
+const LiquidGlass = core.registerPlugin('LiquidGlass', {
+    web: () => Promise.resolve().then(function () { return web; }).then((m) => new m.LiquidGlassWeb()),
+});
+
+/**
+ * Web fallback — real Liquid Glass requires native iOS 26. On the web we
+ * resolve no-ops so the app can run in the browser during development; the
+ * Angular shell is expected to render its own CSS glassmorphism tab bar when
+ * `isNativePlatform()` is false.
+ */
+class LiquidGlassWeb extends core.WebPlugin {
+    async showTabBar(_options) {
+        // no-op on web
+    }
+    async hideTabBar() {
+        // no-op on web
+    }
+    async setSelectedTab(_options) {
+        // no-op on web
+    }
+    async updateTabBadge(_options) {
+        // no-op on web
+    }
+    async getTabBarLayout() {
+        return { height: 0, bottomSafeArea: 0 };
+    }
+}
+
+var web = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    LiquidGlassWeb: LiquidGlassWeb
+});
+
+exports.LiquidGlass = LiquidGlass;
+//# sourceMappingURL=plugin.cjs.js.map

package/dist/plugin.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.cjs.js","sources":["esm/index.js","esm/web.js"],"sourcesContent":["import { registerPlugin } from '@capacitor/core';\nconst LiquidGlass = registerPlugin('LiquidGlass', {\n    web: () => import('./web').then((m) => new m.LiquidGlassWeb()),\n});\nexport * from './definitions';\nexport { LiquidGlass };\n","import { WebPlugin } from '@capacitor/core';\n/**\n * Web fallback — real Liquid Glass requires native iOS 26. On the web we\n * resolve no-ops so the app can run in the browser during development; the\n * Angular shell is expected to render its own CSS glassmorphism tab bar when\n * `isNativePlatform()` is false.\n */\nexport class LiquidGlassWeb extends WebPlugin {\n    async showTabBar(_options) {\n        // no-op on web\n    }\n    async hideTabBar() {\n        // no-op on web\n    }\n    async setSelectedTab(_options) {\n        // no-op on web\n    }\n    async updateTabBadge(_options) {\n        // no-op on web\n    }\n    async getTabBarLayout() {\n        return { height: 0, bottomSafeArea: 0 };\n    }\n}\n"],"names":["registerPlugin","WebPlugin"],"mappings":";;;;AACK,MAAC,WAAW,GAAGA,mBAAc,CAAC,aAAa,EAAE;AAClD,IAAI,GAAG,EAAE,MAAM,mDAAe,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,cAAc,EAAE,CAAC;AAClE,CAAC;;ACFD;AACA;AACA;AACA;AACA;AACA;AACO,MAAM,cAAc,SAASC,cAAS,CAAC;AAC9C,IAAI,MAAM,UAAU,CAAC,QAAQ,EAAE;AAC/B;AACA,IAAI;AACJ,IAAI,MAAM,UAAU,GAAG;AACvB;AACA,IAAI;AACJ,IAAI,MAAM,cAAc,CAAC,QAAQ,EAAE;AACnC;AACA,IAAI;AACJ,IAAI,MAAM,cAAc,CAAC,QAAQ,EAAE;AACnC;AACA,IAAI;AACJ,IAAI,MAAM,eAAe,GAAG;AAC5B,QAAQ,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,cAAc,EAAE,CAAC,EAAE;AAC/C,IAAI;AACJ;;;;;;;;;"}

package/dist/plugin.js

@@ -0,0 +1,42 @@
+var capacitorLiquidGlass = (function (exports, core) {
+    'use strict';
+
+    const LiquidGlass = core.registerPlugin('LiquidGlass', {
+        web: () => Promise.resolve().then(function () { return web; }).then((m) => new m.LiquidGlassWeb()),
+    });
+
+    /**
+     * Web fallback — real Liquid Glass requires native iOS 26. On the web we
+     * resolve no-ops so the app can run in the browser during development; the
+     * Angular shell is expected to render its own CSS glassmorphism tab bar when
+     * `isNativePlatform()` is false.
+     */
+    class LiquidGlassWeb extends core.WebPlugin {
+        async showTabBar(_options) {
+            // no-op on web
+        }
+        async hideTabBar() {
+            // no-op on web
+        }
+        async setSelectedTab(_options) {
+            // no-op on web
+        }
+        async updateTabBadge(_options) {
+            // no-op on web
+        }
+        async getTabBarLayout() {
+            return { height: 0, bottomSafeArea: 0 };
+        }
+    }
+
+    var web = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        LiquidGlassWeb: LiquidGlassWeb
+    });
+
+    exports.LiquidGlass = LiquidGlass;
+
+    return exports;
+
+})({}, capacitorExports);
+//# sourceMappingURL=plugin.js.map

package/dist/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","sources":["esm/index.js","esm/web.js"],"sourcesContent":["import { registerPlugin } from '@capacitor/core';\nconst LiquidGlass = registerPlugin('LiquidGlass', {\n    web: () => import('./web').then((m) => new m.LiquidGlassWeb()),\n});\nexport * from './definitions';\nexport { LiquidGlass };\n","import { WebPlugin } from '@capacitor/core';\n/**\n * Web fallback — real Liquid Glass requires native iOS 26. On the web we\n * resolve no-ops so the app can run in the browser during development; the\n * Angular shell is expected to render its own CSS glassmorphism tab bar when\n * `isNativePlatform()` is false.\n */\nexport class LiquidGlassWeb extends WebPlugin {\n    async showTabBar(_options) {\n        // no-op on web\n    }\n    async hideTabBar() {\n        // no-op on web\n    }\n    async setSelectedTab(_options) {\n        // no-op on web\n    }\n    async updateTabBadge(_options) {\n        // no-op on web\n    }\n    async getTabBarLayout() {\n        return { height: 0, bottomSafeArea: 0 };\n    }\n}\n"],"names":["registerPlugin","WebPlugin"],"mappings":";;;AACK,UAAC,WAAW,GAAGA,mBAAc,CAAC,aAAa,EAAE;IAClD,IAAI,GAAG,EAAE,MAAM,mDAAe,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,cAAc,EAAE,CAAC;IAClE,CAAC;;ICFD;IACA;IACA;IACA;IACA;IACA;IACO,MAAM,cAAc,SAASC,cAAS,CAAC;IAC9C,IAAI,MAAM,UAAU,CAAC,QAAQ,EAAE;IAC/B;IACA,IAAI;IACJ,IAAI,MAAM,UAAU,GAAG;IACvB;IACA,IAAI;IACJ,IAAI,MAAM,cAAc,CAAC,QAAQ,EAAE;IACnC;IACA,IAAI;IACJ,IAAI,MAAM,cAAc,CAAC,QAAQ,EAAE;IACnC;IACA,IAAI;IACJ,IAAI,MAAM,eAAe,GAAG;IAC5B,QAAQ,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,cAAc,EAAE,CAAC,EAAE;IAC/C,IAAI;IACJ;;;;;;;;;;;;;;;"}

package/ios/Sources/LiquidGlassPlugin/LiquidGlassPlugin.swift

@@ -0,0 +1,123 @@
+import Foundation
+import Capacitor
+import UIKit
+
+@objc(LiquidGlassPlugin)
+public class LiquidGlassPlugin: CAPPlugin, CAPBridgedPlugin {
+    public let identifier = "LiquidGlassPlugin"
+    public let jsName = "LiquidGlass"
+    public let pluginMethods: [CAPPluginMethod] = [
+        CAPPluginMethod(name: "showTabBar", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "hideTabBar", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "setSelectedTab", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "updateTabBadge", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "getTabBarLayout", returnType: CAPPluginReturnPromise),
+    ]
+
+    private var tabBarOverlay: LiquidGlassTabBarOverlay?
+
+    @objc func showTabBar(_ call: CAPPluginCall) {
+        guard let rawItems = call.getArray("items") as? [[String: Any]] else {
+            call.reject("items is required")
+            return
+        }
+        let selectedIndex = call.getInt("selectedIndex") ?? 0
+        let tintHex = call.getString("tintColor")
+
+        let items = rawItems.compactMap { LiquidGlassTabItem(dictionary: $0) }
+        guard !items.isEmpty else {
+            call.reject("items cannot be empty")
+            return
+        }
+
+        DispatchQueue.main.async { [weak self] in
+            guard let self else { return }
+            self.presentTabBar(items: items, selectedIndex: selectedIndex, tintHex: tintHex)
+            call.resolve()
+        }
+    }
+
+    @objc func hideTabBar(_ call: CAPPluginCall) {
+        DispatchQueue.main.async { [weak self] in
+            self?.tabBarOverlay?.hide()
+            call.resolve()
+        }
+    }
+
+    @objc func updateTabBadge(_ call: CAPPluginCall) {
+        guard let id = call.getString("id") else {
+            call.reject("id is required")
+            return
+        }
+        let badge = call.getString("badge")
+
+        DispatchQueue.main.async { [weak self] in
+            self?.tabBarOverlay?.updateBadge(id: id, badge: badge)
+            call.resolve()
+        }
+    }
+
+    @objc func setSelectedTab(_ call: CAPPluginCall) {
+        let index = call.getInt("index")
+        let id = call.getString("id")
+
+        DispatchQueue.main.async { [weak self] in
+            guard let overlay = self?.tabBarOverlay else {
+                call.reject("tab bar is not shown")
+                return
+            }
+            if let index {
+                overlay.setSelectedIndex(index)
+            } else if let id {
+                overlay.setSelected(id: id)
+            }
+            call.resolve()
+        }
+    }
+
+    @objc func getTabBarLayout(_ call: CAPPluginCall) {
+        DispatchQueue.main.async { [weak self] in
+            let layout = self?.tabBarOverlay?.currentLayout() ?? (height: 0.0, bottomSafeArea: 0.0)
+            call.resolve([
+                "height": layout.height,
+                "bottomSafeArea": layout.bottomSafeArea,
+            ])
+        }
+    }
+
+    private func presentTabBar(items: [LiquidGlassTabItem], selectedIndex: Int, tintHex: String?) {
+        guard let window = UIApplication.shared.capacitorWindow else { return }
+
+        if tabBarOverlay == nil {
+            let overlay = LiquidGlassTabBarOverlay()
+            overlay.onTabSelected = { [weak self] index, id in
+                self?.notifyListeners("tabSelected", data: ["index": index, "id": id])
+            }
+            overlay.onLayoutChanged = { [weak self] height, bottomSafeArea in
+                self?.notifyListeners("tabBarLayoutChanged", data: [
+                    "height": height,
+                    "bottomSafeArea": bottomSafeArea,
+                ])
+            }
+            tabBarOverlay = overlay
+        }
+
+        tabBarOverlay?.attach(to: window)
+        tabBarOverlay?.configure(items: items, selectedIndex: selectedIndex, tintHex: tintHex)
+        tabBarOverlay?.show()
+    }
+}
+
+// MARK: - UIApplication helper
+private extension UIApplication {
+    var capacitorWindow: UIWindow? {
+        return connectedScenes
+            .compactMap { $0 as? UIWindowScene }
+            .flatMap { $0.windows }
+            .first { $0.isKeyWindow } ??
+            connectedScenes
+            .compactMap { $0 as? UIWindowScene }
+            .flatMap { $0.windows }
+            .first
+    }
+}

package/ios/Sources/LiquidGlassPlugin/LiquidGlassTabBarOverlay.swift

@@ -0,0 +1,162 @@
+import UIKit
+
+struct LiquidGlassTabItem {
+    let id: String
+    let label: String
+    let sfSymbol: String
+    let badge: String?
+
+    init?(dictionary: [String: Any]) {
+        guard
+            let id = dictionary["id"] as? String,
+            let label = dictionary["label"] as? String,
+            let sfSymbol = dictionary["sfSymbol"] as? String
+        else {
+            return nil
+        }
+        self.id = id
+        self.label = label
+        self.sfSymbol = sfSymbol
+        self.badge = dictionary["badge"] as? String
+    }
+}
+
+/// A floating UITabBar overlay that adopts iOS 26 Liquid Glass automatically
+/// when the app is built against the iOS 26 SDK. On earlier iOS the bar falls
+/// back to the translucent blurred UITabBar appearance.
+final class LiquidGlassTabBarOverlay: NSObject {
+
+    // Public callbacks
+    var onTabSelected: ((Int, String) -> Void)?
+    var onLayoutChanged: ((Double, Double) -> Void)?
+
+    // Internal state
+    private weak var window: UIWindow?
+    private var tabBar: UITabBar?
+    private var items: [LiquidGlassTabItem] = []
+
+    func attach(to window: UIWindow) {
+        if self.window === window, tabBar != nil { return }
+        self.window = window
+
+        let tabBar = UITabBar()
+        tabBar.translatesAutoresizingMaskIntoConstraints = false
+        tabBar.delegate = self
+
+        // Default appearance triggers Liquid Glass automatically on iOS 26.
+        let appearance = UITabBarAppearance()
+        appearance.configureWithDefaultBackground()
+        tabBar.standardAppearance = appearance
+        if #available(iOS 15.0, *) {
+            tabBar.scrollEdgeAppearance = appearance
+        }
+
+        window.addSubview(tabBar)
+
+        NSLayoutConstraint.activate([
+            tabBar.leadingAnchor.constraint(equalTo: window.leadingAnchor),
+            tabBar.trailingAnchor.constraint(equalTo: window.trailingAnchor),
+            tabBar.bottomAnchor.constraint(equalTo: window.bottomAnchor),
+        ])
+
+        self.tabBar = tabBar
+        emitLayout()
+    }
+
+    func configure(items: [LiquidGlassTabItem], selectedIndex: Int, tintHex: String?) {
+        guard let tabBar else { return }
+
+        // Preserve selection across re-configs (badge changes, etc.)
+        let previousSelectedId: String? = tabBar.selectedItem.flatMap { current in
+            self.items.indices.contains(current.tag) ? self.items[current.tag].id : nil
+        }
+
+        self.items = items
+
+        let uiItems: [UITabBarItem] = items.enumerated().map { index, item in
+            let tab = UITabBarItem(
+                title: item.label,
+                image: UIImage(systemName: item.sfSymbol),
+                tag: index
+            )
+            if let badge = item.badge, !badge.isEmpty {
+                tab.badgeValue = badge
+            }
+            return tab
+        }
+
+        tabBar.setItems(uiItems, animated: false)
+
+        if let previousSelectedId, let restoreIdx = items.firstIndex(where: { $0.id == previousSelectedId }) {
+            tabBar.selectedItem = uiItems[restoreIdx]
+        } else if selectedIndex >= 0, selectedIndex < uiItems.count {
+            tabBar.selectedItem = uiItems[selectedIndex]
+        }
+
+        if let tintHex, let tint = UIColor(hex: tintHex) {
+            tabBar.tintColor = tint
+        }
+        emitLayout()
+    }
+
+    func updateBadge(id: String, badge: String?) {
+        guard let tabBar, let tabBarItems = tabBar.items,
+              let idx = items.firstIndex(where: { $0.id == id }),
+              idx < tabBarItems.count else { return }
+        let value = (badge?.isEmpty ?? true) ? nil : badge
+        tabBarItems[idx].badgeValue = value
+    }
+
+    func show() {
+        tabBar?.isHidden = false
+        emitLayout()
+    }
+
+    func hide() {
+        tabBar?.isHidden = true
+    }
+
+    func setSelectedIndex(_ index: Int) {
+        guard let tabBar, let items = tabBar.items, index >= 0, index < items.count else { return }
+        tabBar.selectedItem = items[index]
+    }
+
+    func setSelected(id: String) {
+        guard let index = items.firstIndex(where: { $0.id == id }) else { return }
+        setSelectedIndex(index)
+    }
+
+    func currentLayout() -> (height: Double, bottomSafeArea: Double) {
+        guard let tabBar else { return (0, 0) }
+        tabBar.layoutIfNeeded()
+        let bottomInset = tabBar.safeAreaInsets.bottom
+        return (Double(tabBar.frame.height), Double(bottomInset))
+    }
+
+    private func emitLayout() {
+        let layout = currentLayout()
+        onLayoutChanged?(layout.height, layout.bottomSafeArea)
+    }
+}
+
+// MARK: - UITabBarDelegate
+extension LiquidGlassTabBarOverlay: UITabBarDelegate {
+    func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
+        guard item.tag >= 0, item.tag < items.count else { return }
+        let selected = items[item.tag]
+        onTabSelected?(item.tag, selected.id)
+    }
+}
+
+// MARK: - UIColor+hex
+private extension UIColor {
+    convenience init?(hex: String) {
+        var value = hex.trimmingCharacters(in: .whitespacesAndNewlines).uppercased()
+        if value.hasPrefix("#") { value.removeFirst() }
+        guard value.count == 6, let rgb = UInt64(value, radix: 16) else { return nil }
+        let r = CGFloat((rgb & 0xFF0000) >> 16) / 255
+        let g = CGFloat((rgb & 0x00FF00) >> 8) / 255
+        let b = CGFloat(rgb & 0x0000FF) / 255
+        self.init(red: r, green: g, blue: b, alpha: 1.0)
+    }
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@ajuarezso/capacitor-liquid-glass",
+  "version": "0.1.0",
+  "description": "iOS 26 Liquid Glass native chrome (TabBar, NavigationBar, Alerts, Sheets) for Capacitor apps. Falls back gracefully on iOS < 26 and Android.",
+  "main": "dist/plugin.cjs.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
+  "unpkg": "dist/plugin.js",
+  "files": [
+    "dist/",
+    "ios/Sources/",
+    "Package.swift",
+    "CapacitorLiquidGlass.podspec"
+  ],
+  "author": "Anthony Juarez Solis <anthonyjuarezsolis@icloud.com>",
+  "license": "MIT",
+  "keywords": [
+    "capacitor",
+    "plugin",
+    "ios",
+    "liquid-glass",
+    "ios-26",
+    "tabbar",
+    "navigation",
+    "glassmorphism"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/anthonyjuarezsolis/capacitor-liquid-glass.git"
+  },
+  "bugs": {
+    "url": "https://github.com/anthonyjuarezsolis/capacitor-liquid-glass/issues"
+  },
+  "homepage": "https://github.com/anthonyjuarezsolis/capacitor-liquid-glass#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run clean && npm run tsc && rollup -c rollup.config.mjs",
+    "clean": "rimraf ./dist",
+    "tsc": "tsc",
+    "watch": "tsc --watch"
+  },
+  "devDependencies": {
+    "@capacitor/core": "^8.0.0",
+    "rimraf": "^5.0.0",
+    "rollup": "^4.9.0",
+    "typescript": "^5.4.0"
+  },
+  "peerDependencies": {
+    "@capacitor/core": "^8.0.0"
+  },
+  "capacitor": {
+    "ios": {
+      "src": "ios"
+    }
+  }
+}