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