Components
Loading preview...
A directional button that smoothly morphs on hover: - Starts as a circular icon - Expands outward in the given direction (left or right) - Adds a subtle animated line and arrow shift for a modern touch Ideal for carousels, sliders, or navigation UIs where you want subtle motion without being intrusive.
@arunachalam0606
npx shadcn@latest add https://21st.dev/r/arunachalam0606/morphing-arrow-buttonimport MorphingArrowButton from "@/components/ui/morphing-arrow-button";
export default function Demo() {
return (
<div className="h-screen w-screen flex items-center justify-center gap-10 p-4">
<MorphingArrowButton direction="left" />
<MorphingArrowButton direction="right" />
</div>
);
}