Shimmer

free

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

Preparing a response…

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

export default function UsageDemo() {
  return (

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Shimmer

pnpm dlx nateui@latest add Shimmer

yarn dlx nateui@latest add Shimmer

Preparing a response…

import { useState } from 'react';
import Button from '@/components/ui/button';
import Shimmer from '@/components/ui/shimmer';

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'>`	—