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.
"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>
);
}