Animated React menus, tabs and navigation

Profile menu

A workspace profile menu where every icon has its own micro interaction as you hover its row. A gray pill glides between rows and the appearance switch slides.

Navigation, hover and press, Motion

Install

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

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

Usage

import { ProfileMenu } from "@/components/profile-menu";

export default function Account() {
  return (
    <ProfileMenu
      name="Jordan Lee"
      email="jordan@lumen.app"
      avatar="/me.jpg"
      groups={[
        [
          { label: "Dashboard", icon: "home", onSelect: () => go("/") },
          { label: "Projects", icon: "folder", onSelect: () => go("/projects") },
        ],
        [{ label: "Inbox", icon: "mail", badge: 3, onSelect: () => go("/inbox") }],
      ]}
      onThemeChange={setTheme}
      onSignOut={signOut}
    />
  );
}

Props

Prop	Type	Default	Description
name	string	"Jordan Lee"	Shown in the header
email	string	"jordan@lumen.app"	Under the name
avatar	string	a portrait	Avatar image
groups	{ label; icon; badge?; onSelect? }[][]	two groups of three	Rows split by a thin line; icon is home, folder, users, mail, card, activity, palette, heart, pin, bell or clock
theme	"light" \	"dark" \	"system"	Controlled theme; the card turns dark for Dark and follows the device for System (class based dark: styles)
defaultTheme	same	"light"	Starting theme
onThemeChange	(theme) => void		Called when the theme changes
onSignOut	() => void		Called on Log out
className	string		Placement

More navigation

Pill tabs: Tabs whose white pill slides like a rubber band, stretching and thinning, then settling, with a motion blur that follows its speed.
Action menu: A dropdown where every action answers back: the highlight slides between items, copy draws a check, download bounces and washes a light gray fill across, links nudge their arrow.
Blur accordion: Panels spring open and smear with a vertical motion blur that follows their speed, while the plus folds into a minus and the answer rises into focus.
Tab bar: A white, fully rounded mobile bottom navigation in three styles: a gliding soft gray pill, icons with labels and a dot, or a raised action button.

All animated react menus, tabs and navigation