104Get started
HextaUI

Shimmer: Options

Speed, band width, color and angle are each one class.

Faster: shimmer-duration-1000

Wider band: shimmer-spread-24

Tinted: shimmer-color-info

Steeper: shimmer-angle-45

export function ShimmerOptions() {
  return (
    <div className="flex flex-col items-start gap-4 text-sm">
      <p className="shimmer text-muted-foreground shimmer-duration-1000">
        Faster: shimmer-duration-1000
      </p>
      <p className="shimmer text-muted-foreground shimmer-spread-24">
        Wider band: shimmer-spread-24
      </p>
      <p className="shimmer text-foreground shimmer-color-info">
        Tinted: shimmer-color-info
      </p>
      <p className="shimmer text-muted-foreground shimmer-angle-45">
        Steeper: shimmer-angle-45
      </p>
    </div>
  )
}

Add this example

This adds the example as components/examples/shimmer/options.tsx, together with the Shimmer component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/shimmer-options.json

To add only the component, follow the Shimmer installation.

More Shimmer examples

See them all, with keyboard support and accessibility notes, on the Shimmer page.