Shimmer Text

Tailwind CSS

Radix UI

React

Next.js

Demo

This is a shimmer text component

import { ShimmerText } from "@/components/shimmer-text";

function ShimmerTextDemo() {
    return (
        <p className="text-3xl font-bold tracking-tight md:text-5xl">
            This is a <ShimmerText>shimmer text</ShimmerText> component
        </p>
    )
}

export { ShimmerTextDemo };

Installation

npm install @radix-ui/react-slot

pnpm add @radix-ui/react-slot

yarn add @radix-ui/react-slot

bun add @radix-ui/react-slot

Copy and paste the following code into your project.

import { cn } from "@/lib/utils";import { Slot } from "@radix-ui/react-slot";import type * as React from "react";function ShimmerText({className,asChild = false,...props}: React.ComponentProps<"div"> & { asChild?: boolean }) {const Comp = asChild ? Slot : "span";return (    <Comp        {...props}        className={cn(            "animate-shimmer animation-duration-[5s] repeat-[infinite] [animation-timing-function:linear] bg-clip-text! text-transparent [background:radial-gradient(circle_at_center,var(--primary),transparent)_-200%_50%/200%_100%_no-repeat,var(--primary-foreground)]",            className        )}    />);}export { ShimmerText };

@theme {    ...    --animate-shimmer: shimmer;    @keyframes shimmer {        0% {            background-position: 200% 0;        }        100% {            background-position: -200% 0;        }    }}

Usage

import { ShimmerText } from "@/components/shimmer-text";

Basic

<ShimmerText>Shimmering text</ShimmerText>

As child

<ShimmerText asChild>
    <h1>Shimmering heading</h1>
</ShimmerText>

Props

It accepts all the props of a native span element. Additionally:

Prop	Type	Default	Description
asChild	`boolean`	`false`	Merges props onto its child element instead of rendering a `span`.

Demo

Installation

Usage

Basic

As child

Props

On this page