Skip to main content
A text component with an animated shimmer effect that creates a flowing gradient across the text.

​
Installation

npx shadcn@latest add @kokonutui/shimmer-text

​
Usage

import ShimmerText from "@/components/kokonutui/shimmer-text";

export default function Example() {
  return (
    <ShimmerText 
      text="Text Shimmer" 
      className="text-5xl"
    />
  );
}

​
Props

​
text
string
default:"'Text Shimmer'"
The text content to display with shimmer effect
​
className
string
Additional CSS classes for styling

​
Features

  • Gradient Animation: Smooth horizontal gradient movement
  • Light/Dark Mode: Adapts colors for light and dark themes
  • Customizable: Apply custom styles via className
  • Responsive: Works at any text size

​
Customization

The shimmer effect uses a gradient that moves from left to right continuously: 
<ShimmerText 
  text="Custom Shimmer" 
  className="text-6xl font-extrabold"
/>

​
Dependencies

  • motion/react - Animation library
  • @/lib/utils - cn utility function

Build docs developers (and LLMs) love

Get started for freeTalk to us