Wavy Button

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

Installation

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

Usage

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

Examples


Default


Secondary


Destructive


Outline


Link


Gradient


Success


Info


Warning


Icon


Duration


Radius


Size


Disable TextAnim..

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.