Morphy Button

Morphing button with dynamic dot motion, reversible animation.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/morphy-button.json 

Usage

import { MorphyButton } from "@/components/ui/morphy-button";
<MorphyButton size="lg">
  Get Started
</MorphyButton>

Examples


Reverse


Size


Custom

API Reference

Morphy Button

Morphing button with dynamic dot motion, reversible animation.

Props

PropertyTypeDefaultDescription
size"sm" | "default" | "lg""default"
Controls button size and padding layout.
asChildbooleanfalse
Renders as a child element using Radix Slot if true.
dotClassNamestring
Adds custom styling to the animated dot element.
animate"normal" | "reverse""normal"
Reverses morph animation direction when set to 'reverse'.
classNamestring
Custom Tailwind or CSS classes for additional styling.
childrenReactNode
Button label or nested elements.
...propsbutton props
Inherits all native HTML button attributes and events.

Built withby Ahdeetai.