🎉 Sora UI is now part of the shadcn/ui registry ecosystem.
Sora UI

Char Stagger Button

A button with per-character stagger animation on hover.

Made by Axyl
Loading...

Installation

Usage

import { CharStaggerButton } from '@/components/sora-ui/buttons/char-stagger-button';

export default function Page() {
  return (
    <>
      <CharStaggerButton href="#">Staggering Button</CharStaggerButton>

      <CharStaggerButton variant="link" href="#" className="text-white">
        or use on links
      </CharStaggerButton>

      <CharStaggerButton asChild>
        <button type="button">Submit</button>
      </CharStaggerButton>
    </>
  );
}

Props

PropTypeDefault
asChild?
boolean
false
children?
string | ReactElement
-
label?
string
-
variant?
"default" | "link"
"default"
staggerDelay?
number
0.01
className?
string
-
bgClassName?
string
-
textClassName?
string
-
charsClassName?
string
-
charClassName?
string
-

Built by Axyl. The source code will be available on GitHub soon.

Last updated: 6/7/2026