Liquid Glass Tab Bar
A floating glass tab bar whose selection is a droplet: press and drag and it swells, stretches as it travels, magnifies the tabs beneath and lands on the nearest one.
- Category
- Components
- Added
- 2026-09-26
- Deps
- none
- Updated
- 2026-09-26
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Listen now
Afterglow
Night Swim
Gold Hour
Greenhouse
Tidal
Ember
Afterglow
Night Swim
Gold Hour
Greenhouse
Tidal
Ember
Props
"use client";
import { useEffect, useId, useRef, useState } from "react";
import type {
KeyboardEvent as ReactKeyboardEvent,
MouseEvent as ReactMouseEvent,
PointerEvent as ReactPointerEvent,
ReactNode,
} from "react";
/**
* LiquidGlassTabBar — a floating glass tab bar whose selection is a drop of
* liquid glass.
*
* At rest the selection is a soft platter behind the current tab. Press
* anywhere on the bar and the platter turns into a clear droplet: it lifts a
* few pixels (never onto the next tab's icon, never past the bar's edge),
* follows your finger across the bar, stretches in the direction it travels
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this component
The tab bar is where the 2025 glass material does its best trick, and almost every web copy stops at a blurred pill with a highlight that jumps between tabs. Here the selection is a drop of glass. At rest it is a soft platter behind the current tab. Press the bar and it swells into a clear droplet under your finger; drag and it follows you, stretching in the direction it travels and squashing as it stops, while the icons underneath show through it magnified. Let go and it lands on the nearest tab. The active colour is not a class switched on the tab: it lives inside the droplet as a tinted copy of the whole row, lined up with the real one, so the colour slides continuously as the droplet moves. The bar is glass too, blurred and saturated, and in Chromium a displacement map sized to the bar bends whatever scrolls beneath its rim. It collapses to icons while a page scrolls down, takes a search or compose button in its own glass circle, works with links or buttons, and supports the arrow keys, Home and End.
Curator’s note
Part of the Glassmorphism kit, drop 1. Pro because the droplet is a small physics system: a spring, a stretch from velocity, and a magnifying copy of the row that carries the active colour.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Liquid Glass Switch
componentsA toggle whose knob swells into a clear glass lens while you hold or drag it, magnifying the track beneath, then springs home solid.
Glass Refraction Panel
componentsA card of liquid glass: it bends its backdrop at the rim, with a graduated edge and a light that follows the pointer.
Liquid Glass Button
componentsA pill of liquid glass that bends what is behind it: real refraction at the rim, a rim and sheen lit by your pointer, and a gel-like press.