Skip to content

Thinking Shimmer

A quiet live status that keeps the agent current action readable while work continues.

Usage

import { ThinkingShimmer } from "@/components/ai/thinking-shimmer"


export function Example() {
  return <ThinkingShimmer label="Reviewing the repository" />
}

Install

pnpm dlx shadcn@latest add @pastaui/thinking-shimmer

Source

import { StarsMinimalisticIcon as SparklesIcon } from '@solar-icons/react/linear/stars-minimalistic'
import * as React from 'react'


import { cn } from 'cn'


interface ThinkingShimmerProps extends React.ComponentProps<'div'> {
  label?: string
}


function ThinkingShimmer({ className, label = 'Thinking', ...props }: ThinkingShimmerProps) {
  return (
    <div
      aria-live="polite"
      data-slot="thinking-shimmer"
      className={cn(
        'flex items-center gap-2 font-sans text-sm font-[450] tracking-[-0.05px] text-muted-foreground',
        className,
      )}
      {...props}
    >
      <SparklesIcon className="size-4 animate-pulse motion-reduce:animate-none" />
      <span className="agent-text-shimmer">{label}</span>
    </div>
  )
}


export { ThinkingShimmer }
export type { ThinkingShimmerProps }

Props

Thinking Shimmer props
PropTypeDefaultDescription
labelstring= ThinkingDescribes the current agent activity.