Text Shimmer

Usage

"use client";

import { TextShimmer } from "@thenamespace/uikit";

export const DemoDefaultExample = () => (
  <div className="flex flex-col gap-4 text-sm">
    <TextShimmer>Thinking...</TextShimmer>
    <TextShimmer>Generating response...</TextShimmer>
  </div>
);

Use TextShimmer for short labels that indicate active generation or background work.

Color

The shimmer uses currentColor, so you can pass text color utilities such as text-muted and keep the animation visible.

<TextShimmer className="text-muted">Thinking...</TextShimmer>

Anatomy

import { TextShimmer } from "@thenamespace/uikit";

<TextShimmer>Thinking...</TextShimmer>;

CSS Classes

• .text-shimmer - Root animated text element

API Reference

TextShimmer

Also supports render props from Namespace UIKit dom.span.