Shimmer

Text with a light sweeping across it, for the moment before the model answers.

Reading the registry and picking a component…

1import { Shimmer } from '@/components/ui/shimmer';
2
3export function Default() {
4  return <Shimmer className="text-sm">Reading the registry and picking a component…</Shimmer>;
5}

Installation

pnpm dlx nachui add shimmer

Anatomy

1import { Shimmer } from '@/components/ui/shimmer';

1<Shimmer>Reading the registry…</Shimmer>

Shimmer is a single element. It paints a gradient behind the text, clips it to the glyphs and slides it, so the label reads as busy without a spinner next to it.

Polymorphic

as picks the tag. The default is a paragraph, but a heading or an inline span works the same.

Drafting the answer

Searching the docs for prompt input

Almost there

1import { Shimmer } from '@/components/ui/shimmer';
2
3export function Sizes() {
4  return (
5    <div className="flex w-full max-w-sm flex-col gap-3">
6      <Shimmer as="h3" className="text-lg font-medium" duration={2.4}>
7        Drafting the answer
8      </Shimmer>
9      <Shimmer className="text-sm">Searching the docs for prompt input</Shimmer>
10      <Shimmer as="span" className="text-xs" spread={3}>
11        Almost there
12      </Shimmer>
13    </div>
14  );
15}

Motion

The sweep respects prefers-reduced-motion. When motion is reduced the component renders plain muted text instead, so nothing moves and the label still reads as secondary.

duration sets how long one pass takes and spread widens the bright band, multiplied by the length of the text so short and long labels sweep at a similar rhythm.

API Reference

Shimmer

Prop	Type	Default	Description
`as`	`ElementType`	`'p'`	Tag or component to render
`duration`	`number`	`2`	Seconds for one full sweep
`spread`	`number`	`2`	Width multiplier for the bright band
`className`	`string`	-	Additional CSS classes

Found something to improve?

Notice a bug, typo, or missing detail on this page? Help us make the documentation better by opening a GitHub issue.

Create an Issue

PreviousReasoning

NextSuggestion