Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/kokonut-labs/kokonutui/llms.txt

Use this file to discover all available pages before exploring further.

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