Shimmer | Cortexcn

Generating your dashboard...

Installation

pnpm dlx shadcn@latest add @cortexcn/shimmer

pnpm dlx shadcn@latest add @cortexcn/shimmer

Usage

import { Shimmer } from "@/components/shimmer";

<Shimmer>Thinking...</Shimmer>

A band of light sweeps across the text on a loop. The Reasoning trigger uses it while the model streams.

Behavior

The band's width grows with the text, so short and long labels sweep at the same pace. Change it with spread.
With reduced motion enabled, the text renders still, in the muted color.

Examples

Heading

Searching 135 components

"use client";

import { Shimmer } from "@/components/shimmer";

export function ShimmerHeading() {
  return (
    <Shimmer as="h3" className="font-semibold text-2xl" duration={3}>
      Searching 135 components
    </Shimmer>
  );
}

"use client";import { Shimmer } from "@/components/shimmer";export function ShimmerHeading() {  return (    <Shimmer as="h3" className="font-semibold text-2xl" duration={3}>      Searching 135 components    </Shimmer>  );}

In a message

Can you add a pricing table to the landing page?

Reading the landing page...

"use client";

import { Shimmer } from "@/components/shimmer";

export function ShimmerInMessage() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <div className="self-end rounded-2xl rounded-br-sm bg-primary px-4 py-2 text-primary-foreground text-sm">
        Can you add a pricing table to the landing page?
      </div>
      <div className="self-start rounded-2xl rounded-bl-sm bg-muted px-4 py-2 text-sm">
        <Shimmer as="span" duration={1.5} spread={3}>
          Reading the landing page...
        </Shimmer>
      </div>
    </div>
  );
}

"use client";import { Shimmer } from "@/components/shimmer";export function ShimmerInMessage() {  return (    <div className="flex w-full max-w-sm flex-col gap-3">      <div className="self-end rounded-2xl rounded-br-sm bg-primary px-4 py-2 text-primary-foreground text-sm">        Can you add a pricing table to the landing page?      </div>      <div className="self-start rounded-2xl rounded-bl-sm bg-muted px-4 py-2 text-sm">        <Shimmer as="span" duration={1.5} spread={3}>          Reading the landing page...        </Shimmer>      </div>    </div>  );}

Props

Prop	Type	Default	Description
`children`	`string`	-	The text to shimmer
`as`	`ElementType`	`"p"`	The element to render
`duration`	`number`	`2`	Seconds for one sweep
`spread`	`number`	`2`	Width of the band, in pixels per character
`className`	`string`	-	Extra classes for the text

Adapted from AI Elements by Vercel (Apache 2.0).