Mugen Contact Cascade

A compact contact rail that lets people stay in context while one collaborator comes forward as a calm, usable direct channel.

Dependencies

lucide-react↗motion↗

Interaction Types

Select a collaborator — the detail channel changes in place without leaving the rail

Use up and down arrows for instant contact selection

Open a real mail action from the active contact card

How to use

'use client';

import { MugenContactCascade } from "@/components/mugen-contact-cascade";

export default function Demo() {
  return <MugenContactCascade contacts={contacts} />;
}

Component Props

Prop	Type	Default	Description
contacts	MugenContact[]	—	Contact data with name, role, email, availability, and accent
value	string	—	Controlled selected contact id
defaultValue	string	first contact	Initial uncontrolled selection
compact	boolean	false	Condenses the rail for catalogs and narrow containers
onValueChange	(id, contact) => void	—	Called after selection changes
onContact	(contact) => void	—	Called before opening the contact channel
onCopyEmail	(contact) => void	—	Called after the active email address is copied
disabled	boolean	false	Disables interaction

← PreviousMugen Ticket Morph Next →Mugen Stamp Deck