Morphy Button

Morphing button with dynamic dot motion, reversible animation.

Loading...

Installation

npx shadcn@latest add @scrollxui/morphy-button 

Usage

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

Examples


Reverse

Loading...

Size

Loading...

Custom

Loading...

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.