Animated tab bar for React

A liquid glass drop slides between tabs and opens into a music player. React, Tailwind, Framer Motion.

Get the code · $3React · Tailwind · TypeScript
Liquid Glass Tab Bar, preview

Use it in Next.js

"use client";
import { LiquidGlassTabBar } from "@/components/LiquidGlassTabBar";

export default function Nav() {
  return <LiquidGlassTabBar onTabChange={(id) => console.log(id)} />;
}

Install

  1. Copy from the zipPut react/src/components + react/src/data into src/, then npm i framer-motion.
  2. Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

data
your tabs, now playing and covers
onTabChange
called with the tab id
onOpenPlayer
the drop burst into the player
autoplayDemo
loops the demo until the first tap

Questions

Does the tab bar work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Does it work on iPhone Safari?

Yes. The glass uses backdrop-filter, which Safari on iPhone supports.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.