Stagger Button

Interactive button with animated stagger text and customizable styles for modern uis.

Installation

npx shadcn@latest add @scrollxui/stagger-button

import { StaggerButton } from '@/components/ui/stagger-button';

<StaggerButton direction='up'>Get started</StaggerButton>

Interactive button with animated stagger text and customizable styles for modern uis.

Property	Type	Default	Description
`variant`	string	`default`	Button style (default, destructive, outline,..)
`size`	string	`default`	Button size (default, sm, lg, icon)
`asChild`	boolean	`—`	Renders as Slot child element
`text`	string	`—`	Base button text
`hoverText`	string	`—`	Text displayed on hover
`staggerDelay`	number	`0.05`	Delay between each character animation
`staggerDuration`	number	`1`	Duration of the stagger animation
`direction`	string	`down`	Animation direction (up, down, alternate-even, alternate-odd)
`easing`	number[]	`[0.22, 1, 0.36, 1]`	Easing curve for animation timing
`disableStagger`	boolean	`—`	Disables stagger text animation
`className`	string	`—`	Custom CSS classes for styling
`children`	ReactNode	`—`	Button content: text or elements
`...props`	button props	`—`	Supports native button attributes and events