Shiny Text

A shimmering highlight that continuously sweeps across text — perfect for hero taglines and call-to-action copy.

UniqueUI CLI

npx uniqueui add shiny-text

shadcn CLI

npx shadcn@latest add https://uniqueui.com/r/shiny-text.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

The future of UI is here.Ship faster. Look better.Designed for builders who care.

Usage

"use client";
import { ShinyText } from "@/components/ui/shiny-text";

export default function Hero() {
  return (
    <h1 className="text-5xl font-black">
      <ShinyText
        text="Build something brilliant."
        speed={3}
        shimmerWidth={45}
        className="text-5xl font-black"
      />
    </h1>
  );
}

Props

Prop	Type	Description
`text`	`string`	The text content to render.
`speed`	`number`	Duration of one shimmer pass in seconds.
`shimmerWidth`	`number`	Width of the bright band as a percentage.
`className`	`string`	Extra Tailwind classes (font size, weight, colour, etc.).
`theme`	`"light" \| "dark"`	Controls the shimmer palette.