Stagger Text

Use Stagger Text for a short label that responds when someone hovers it. The staggered treatment is best used as a small expressive detail, not for essential reading.

Preview

Reduce motion:Off

Inspect

Installation

Motion

npx shadcn@latest add @sona-ui/stagger-text

Basic usage

stagger-label.tsx

import StaggerText from "@/components/ui/stagger-text/stagger-text";
 
export function StaggerLabel() {
return <StaggerText>View details</StaggerText>;
}

Examples

Use the styling options to match the surrounding text. Keep the phrase short enough that the hover response remains readable.

Usage


export default function StaggerTextExample() {
  return (
    <StaggerText text="Stagger Text!!" className="text-5xl leading-[1.2]" />
  );
}

API

Property	Type	Default	Description
`text`	`string`	`required`	The text content to be displayed with staggered animation.
`className`	`string`	`—`	Additional CSS classes for the container.
`as`	`T`	`"h3"`	The HTML tag to be used for the text container.

Accessibility

The text should communicate the same meaning without the hover effect. Avoid using it as the sole indicator of a state change.

Styling

Use className and color options to fit the component into a label, link, or compact call to action.

Contact

Found a bug or need help using this component? Open an issue on GitHub.

License & Usage

Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects.

Sona UI

Stagger Text

Preview

Installation

Basic usage

Examples

Usage

API

Accessibility

Styling

Contact

License & Usage

Related components

Spinning Text

Split Text

Preview

SSttaaggggeerr TTeexxtt!!!!

Installation

Basic usage

Examples

Usage

API

Accessibility

Styling

Contact

License & Usage

Spinning Text

Split Text