Shimmer

free

Shimmer animates a text gradient while streamed content is still arriving.

Preview

Dark

AssistantPreparing a response…

import Shimmer from '@/components/ui/Shimmer';

export default function UsageDemo() {
  return (
    <div className="inline-flex items-center gap-2 text-sm">
      <span className="text-muted-foreground">Assistant</span>
      <Shimmer>Preparing a response…</Shimmer>
    </div>
  );
}

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Shimmer

Examples

Inactive

Set active to false when the label should remain quiet.

Preview

Dark

Preparing a response…

import Shimmer from '@/components/ui/Shimmer';

export default function InactiveDemo() {
  return <Shimmer active={false}>Preparing a response…</Shimmer>;
}

API

Shimmer renders a text span with an optional gradient sweep. It keeps the same text content when motion is reduced or the animation is inactive.

Prop	Description	Type	Default
`active`	Whether the gradient sweep runs. Reduced-motion preferences always render the static text treatment.	`boolean`	`true`
`className`	Class names merged onto the text span.	`string`	—
`ref`	Ref forwarded to the text span.	`Ref<HTMLSpanElement>`	—
`...nativeProps`	Native props for the rendered span.	`ComponentProps<'span'>`	—