Text shimmer

Show ongoing work with a calm light across the words.

npx shadcn@latest add @silicon-ui/text-shimmer
textmotionloading
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/text-shimmer

Manually

  1. Install the dependencies.

    npm install motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/text-shimmer/text-shimmer.tsx
    • components/silicon-ui/text-shimmer/text-shimmer.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { TextShimmer } from "@/components/silicon-ui/text-shimmer/text-shimmer";

API reference

PropTypeDefault
children*

The status text. Keep it to one short line.

string—
active

Sweep while work is ongoing. Defaults to true.

booleantrue
duration

Seconds for one sweep across the text. Defaults to 1.8.

number1.8
as"span" | "p" | "div" | "h2" | "h3" | "h4""span"
classNamestring—
idstring—

Dependencies

npm
motion
Registry
silicon-motion-tokens