Shimmer

PreviousNext

An animated text shimmer effect for loading states in AI interfaces.

Loading content...

This text has a shimmer effect while content is being generated.

import { Shimmer } from "@/components/ai-elements/shimmer"

export function ShimmerDemo() {
  return (
    <div className="space-y-4">
      <Shimmer as="h2" className="text-2xl font-bold">
        Loading content...
      </Shimmer>
      <Shimmer as="p">
        This text has a shimmer effect while content is being generated.
      </Shimmer>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add shimmer

Usage

import { Shimmer } from "@/components/ai-elements/shimmer"
<Shimmer>Loading content...</Shimmer>

Examples

Default

Loading content...

This text has a shimmer effect while content is being generated.

import { Shimmer } from "@/components/ai-elements/shimmer"

export function ShimmerDemo() {
  return (
    <div className="space-y-4">
      <Shimmer as="h2" className="text-2xl font-bold">
        Loading content...
      </Shimmer>
      <Shimmer as="p">
        This text has a shimmer effect while content is being generated.
      </Shimmer>
    </div>
  )
}

Custom Duration

<Shimmer duration={1}>Fast shimmer</Shimmer>
<Shimmer duration={3}>Slow shimmer</Shimmer>

Custom Element

<Shimmer as="h2">Shimmer heading</Shimmer>
<Shimmer as="span">Shimmer text</Shimmer>

API Reference

Shimmer

Animated text with shimmer effect.

PropTypeDefaultDescription
childrenstring-Text content to shimmer
asElementType"p"HTML element type
durationnumber2Animation duration in seconds
spreadnumber2Shimmer spread multiplier
classNamestring-Custom CSS classes