Morph Select

Component 7

About

A dropdown select whose trigger morphs into its options panel using a shared layout animation, so the closed control and open menu feel like one continuous surface instead of a detached popover.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Morph Select to your project and fits it to your theme.

Code

How Morph Select is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import MorphSelect, {
  MorphSelectTrigger,
  MorphSelectValue,
  MorphSelectContent,
  MorphSelectItem,
} from "@/components/ui/select-morph";

export default function SelectMorphDemo() {
  return (
    <div className="flex w-full max-w-xs items-center justify-center">
      <MorphSelect defaultValue="apple" className="w-full">
        <MorphSelectTrigger>
          <MorphSelectValue placeholder="Select a fruit" />
        </MorphSelectTrigger>
        <MorphSelectContent>
          <MorphSelectItem value="apple">Apple</MorphSelectItem>
          <MorphSelectItem value="banana">Banana</MorphSelectItem>
          <MorphSelectItem value="cherry">Cherry</MorphSelectItem>
          <MorphSelectItem value="date">Date</MorphSelectItem>
        </MorphSelectContent>
      </MorphSelect>
    </div>
  );
}