# Morph Menu — Skecher UI

A measured action menu that morphs between compact and expanded states with configurable directional movement.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/morph-menu
```

## Dependencies

- motion
- lucide-react
- react-use-measure

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
"use client";

import { MorphMenu, type MorphMenuItem } from "@/components/ui/morph-menu";

const items: readonly MorphMenuItem[] = [
  {
    id: "project",
    title: "New project",
    description: "Start something from scratch",
  },
  {
    id: "document",
    title: "New document",
    description: "Create a blank document",
  },
  {
    id: "import",
    title: "Import",
    description: "Bring something into your workspace",
  },
];

export default function MorphMenuExample() {
  return (
    <div className="flex min-h-96 items-center justify-center">
      <MorphMenu
        direction="top-left"
        items={items}
        onItemSelect={(item) => console.log(item.id)}
      />
    </div>
  );
}
```

## Source files

- components/ui-components/morph-menu.tsx — Measured direction-aware morph menu component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/morph-menu
- Registry item with complete source: https://skecher-ui.com/r/morph-menu.json
- Component AI context: https://skecher-ui.com/llms/morph-menu