# Morphing Action Dock — Skecher UI

A floating action dock that merges into one compact surface and splits into contextual actions on hover, focus, or pin.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/morphing-action-dock
```

## Dependencies

- motion
- lucide-react

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
"use client";

import { Compass, Feather, FlameKindling } from "lucide-react";

import { MorphingActionDock } from "@/components/ui/morphing-action-dock";

const actions = [
  {
    id: "explore",
    label: "Explore",
    icon: Compass,
    tone: "from-slate-950 via-slate-800 to-slate-700",
    eyebrow: "Find direction",
    paragraph: "Move from a broad idea to a clear next step.",
    cue: "Explore the workspace",
  },
  {
    id: "write",
    label: "Write",
    icon: Feather,
    tone: "from-neutral-950 via-neutral-800 to-stone-700",
    eyebrow: "Shape the draft",
    paragraph: "Turn the selected direction into useful copy.",
    cue: "Start a new draft",
  },
  {
    id: "launch",
    label: "Launch",
    icon: FlameKindling,
    tone: "from-zinc-950 via-zinc-800 to-orange-950",
    eyebrow: "Ship with confidence",
    paragraph: "Review the final details and publish your work.",
    cue: "Prepare the release",
  },
];

export default function MorphingActionDockExample() {
  return (
    <MorphingActionDock
      items={actions}
      defaultActiveId="explore"
      className="mx-auto max-w-4xl"
    />
  );
}
```

## Source files

- components/ui-components/morphing-action-dock.tsx — Morphing Action Dock component

## Canonical resources

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