grid view selected
Mugen Switch
A segmented control with a fluid active surface beneath its labels. The active segment travels with soft anticipation, flexes while its width changes, and resolves into a crisp high-contrast state.
Dependencies
Interaction Types
Click any enabled segment to send the fluid surface toward it
Active pill changes width and corner shape as a single soft mass
Use Left/Right, Up/Down, Home, or End to move selection by keyboard
How to use
'use client';
import { useState } from "react";
import { MugenSwitch } from "@/components/mugen-switch";
export default function Demo() {
const [view, setView] = useState("grid");
return (
<MugenSwitch
value={view}
onValueChange={setView}
items={[
{ value: "grid", label: "Grid" },
{ value: "list", label: "List" },
{ value: "focus", label: "Focus" },
]}
/>
);
}Component Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | MugenSwitchItem[] | — | Segment values, labels, optional icons, and disabled states |
| value | string | — | Controlled selected value |
| defaultValue | string | first enabled item | Initial selection in uncontrolled mode |
| onValueChange | (value: string) => void | — | Called after a user selects an enabled segment |
| size | "sm" | "md" | "lg" | "md" | Control density |
| disabled | boolean | false | Disables every segment |