Animated React menus, tabs and 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. Click between Inbox and Saved to see it.
Navigation, press, Motion
Install
npm i clsx motion tailwind-merge && curl -o components/pill-tabs.tsx https://motion-brew.com/r/pill-tabs.tsxOne self contained file for React and Tailwind CSS: pill-tabs.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { useState } from "react";
import { PillTabs } from "@/components/pill-tabs";
export default function Page() {
const [tab, setTab] = useState("all");
return (
<PillTabs
value={tab}
onValueChange={setTab}
tabs={[
{ id: "all", label: "All" },
{ id: "unread", label: "Unread", badge: 12 },
{ id: "archived", label: "Archived" },
]}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tabs | PillTab[] | inbox, mentions, saved | { id, label, badge? } left to right |
| defaultValue | string | first tab | Active tab when uncontrolled |
| value | string | Active tab when controlled | |
| onValueChange | (id) => void | New tab picked | |
| stretch | number | 0.45 | How rubbery the slide is, 0 (rigid) to 1 (very stretchy) |
| blur | number | 7.5 | Strongest horizontal blur mid-flight, px; 0 turns it off |
| label | string | "Sections" | Accessible name for the tab list |
More navigation
- 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.
- 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.