Animated React menus, tabs and navigation

Account menu

A profile pill that morphs into an account card: a status picker that recolours the avatar's dot, quick tiles that lift, a workspace switcher whose check flies, a filling storage meter and a log out that asks twice.

Navigation, press, Motion

Install

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

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

Usage

import { AccountMenu } from "@/components/account-menu";

export default function TopBar() {
  return (
    <AccountMenu
      name={user.name}
      handle={user.handle}
      avatar={user.avatar}
      workspaces={workspaces}
      onWorkspaceChange={(id) => switchWorkspace(id)}
      onSignOut={signOut}
    />
  );
}

Props

Prop	Type	Default	Description
name	string	"Jordan Lee"
handle	string	"@jordan"	Under the name
avatar	string	a sample photo
defaultOpen	boolean	false	Start as the card
defaultStatus	"online" \	"focus" \	"away" \	"hidden"	"online"
onStatusChange	(status) => void
workspaces	AccountWorkspace[]	two samples	id, name, plan, color
defaultWorkspace	string	the first
onWorkspaceChange	(id) => void
storage	[used, total] \	null	[6.4, 10]	GB; null hides the meter
onUpgrade	() => void
onProfile, onSettings, onShortcuts, onNewWorkspace	() => void		The tiles and the new workspace row
onSignOut	() => void		Called on the second press
className	string

More navigation

Liquid tabs: Icon tabs where the chosen tab is a white bump grown out of the panel.
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.

All animated react menus, tabs and navigation