Animated React menus, tabs and navigation

Liquid tabs

Icon tabs where the chosen tab is a white bump grown out of the panel. Switch tabs and it flows across like liquid, stretching and snapping back round.

Navigation, press, Motion

Install

npm i clsx motion tailwind-merge && curl -o components/liquid-tabs.tsx https://motion-brew.com/r/liquid-tabs.tsx

One self contained file for React and Tailwind CSS: liquid-tabs.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { LiquidTabs } from "@/components/liquid-tabs";
import { Bell, Shield, User } from "lucide-react";

export default function AccountSettings() {
  return (
    <LiquidTabs
      stretch={0.6}
      tabs={[
        { id: "profile", label: "Profile", icon: User, content: <Profile /> },
        { id: "notifications", label: "Notifications", icon: Bell, content: <Notifications /> },
        { id: "security", label: "Security", icon: Shield, content: <Security /> },
      ]}
    />
  );
}

Props

Prop	Type	Default	Description
tabs	{ id; label; icon; content }[]	four demo tabs	Icon is any component taking className (animated icons also take active)
defaultValue	string	the first tab	Tab chosen first
value	string		Controlled tab id
onValueChange	(id) => void		Called when the tab changes
stretch	number	0.6	0 is firm, 1 is very stretchy
className	string		Placement and width

More navigation

Sidebar nav: An app sidebar that folds to a slim rail of icons.
Context menu: Right click the card for a menu where every icon animates.
Profile menu: A workspace profile menu where every icon has its own micro interaction as you hover its row.
Pill tabs: Tabs whose white pill slides like a rubber band, stretching and thinning, then settling, with a motion blur that follows its speed.

All animated react menus, tabs and navigation