Source: https://ai-sdk.dev/elements/components/shimmer

Vercel

Slash Forward

Sparkles

AI SDK

Docs Cookbook Providers Playground AI ElementsAI ElementsLeft sparkleRight sparkle AI GatewayGateway

Search...⌘KFeedback GitHub Vercel LogoSign in with Vercel

Chatbot

Shimmer

An animated text shimmer component for creating eye-catching loading states and progressive reveal effects.

The Shimmer component provides an animated shimmer effect that sweeps across text, perfect for indicating loading states, progressive reveals, or drawing attention to dynamic content in AI applications.

Preview

Code

This text has a shimmer effect

Large Heading

Slower shimmer with wider spread

Installation

AI Elements

shadcn CLI

Manual

npx ai-elements@latest add shimmer

Features

Smooth animated shimmer effect using CSS gradients and Framer Motion
Customizable animation duration and spread
Polymorphic component - render as any HTML element via the as prop
Automatic spread calculation based on text length
Theme-aware styling using CSS custom properties
Infinite looping animation with linear easing
TypeScript support with proper type definitions
Memoized for optimal performance
Responsive and accessible design
Uses text-transparent with background-clip for crisp text rendering

Examples

Different Durations

Preview

Code

Fast (1 second)

Loading quickly...

Default (2 seconds)

Loading at normal speed...

Slow (4 seconds)

Loading slowly...

Very Slow (6 seconds)

Loading very slowly...

Custom Elements

Preview

Code

As paragraph (default)

This is rendered as a paragraph

As heading

Large Heading with Shimmer

As span (inline)

Processing your request with AI magic...

As div with custom styling

Custom styled shimmer text

Props

`<Shimmer />`

Prop

Type

children?string

as?ElementType

className?string

duration?number

spread?number

Reasoning

A collapsible component that displays AI reasoning content, automatically opening during streaming and closing when finished. Sources

A component that allows a user to view the sources or citations used to generate a response.

On this page

Installation Features Examples Different Durations Custom Elements Props <Shimmer />

GitHubEdit this page on GitHub Scroll to topCopy pageOpen in chat