Mugen Expand Tabs

An icon-first navigation rail that morphs the active tab open on a single width spring, preserves accessible roving focus, and crossfades the panel with a blur-masked handoff.

Dependencies

motion↗

Interaction Types

Select a tab — the pill morphs open on one width spring, never squashing the icon

Panels crossfade with a blur mask instead of waiting out an exit animation

Navigate with Left / Right, Home, and End — keyboard moves skip animation entirely

How to use

'use client';

import { Bell, FolderOpen, LayoutGrid } from "lucide-react";
import { MugenExpandTabs } from "@/components/mugen-expand-tabs";

export default function Demo() {
  return (
    <MugenExpandTabs
      defaultValue="overview"
      items={[
        { value: "overview", label: "Overview", icon: LayoutGrid },
        { value: "projects", label: "Projects", icon: FolderOpen },
        { value: "signals", label: "Signals", icon: Bell },
      ]}
    />
  );
}

Component Props

Prop	Type	Default	Description
items	MugenExpandTabItem[]	—	Tab definitions with values, labels, Lucide icons, and optional content
value	string	—	Controlled selected tab value
defaultValue	string	first item	Initial selected tab value in uncontrolled mode
onValueChange	(value: string) => void	—	Callback triggered when active tab changes
expandOnHover	boolean	false	Preview a tab's label on hover. Off by default — hover reflow reads as jitter
disabled	boolean	false	Disables interaction across all tabs

← PreviousMugen Agent Pulse Next →Liquid Slider