Wavy Button

Interactive wavybutton with animated text and customizable styles for modern uis.

Loading...

Installation

npx shadcn@latest add @scrollxui/wavy-button 

Usage

import WavyButton from '@/components/ui/wavy-button';
<WavyButton variant='outline'>Button</WavyButton>

Examples


Default

Loading...

Secondary

Loading...

Destructive

Loading...

Outline

Loading...

Link

Loading...

Gradient

Loading...

Success

Loading...

Info

Loading...

Warning

Loading...

Icon

Loading...

Duration

Loading...

Radius

Loading...

Size

Loading...

Disable TextAnim..

Loading...

API Reference

Wavy Button

Interactive wavybutton with animated text and customizable styles for modern uis.

Props

PropertyTypeDefaultDescription
variantstringdefault
Visual style of the button (default, destructive, outline, etc.)
sizestringdefault
Button size (sm, default, lg, xl, icon, icon-sm, icon-lg)
radiusstringdefault
Border radius (none, sm, default, lg)
childrenReactNode
Button content: text or icons
animationDurationnumber0.8
Duration of the wave animation in seconds
strokeWidthnumber30
Thickness of the wave stroke
splitDelaynumber0.04
Delay between each character animation
disableTextAnimationboolean
Disables the wavy text effect if true
classNamestring
Custom CSS classes for styling
...propsbutton props
Supports standard button attributes and events

Built withby Ahdeetai.