Animated React menus, tabs and navigation

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. Every tap bounces and plays its animated icon.

Navigation, press, Motion

Install

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

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

Usage

import { TabBar } from "@/components/tab-bar";

export default function AppShell() {
  return (
    <TabBar
      variant="pill"
      tabs={[
        { id: "home", label: "Home", icon: "home" },
        { id: "search", label: "Search", icon: "search" },
        { id: "inbox", label: "Inbox", icon: "chat", badge: 2 },
        { id: "profile", label: "Profile", icon: "profile" },
      ]}
      onChange={(id) => router.push(`/${id}`)}
    />
  );
}

Props

Prop	Type	Default	Description
tabs	TabItem[]	five samples	id, label, icon, badge; four for the action style
variant	"pill" \	"labels" \	"action"	"pill"
value	string		The selected tab, when you control it
defaultValue	string	the first tab
onChange	(id) => void
actionLabel	string	"Create"	The middle button's name (action style)
onAction	() => void		The middle button
className	string

More 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.
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.

All animated react menus, tabs and navigation