Shimmer Loading Effect! LFG!  🚀

Faster Shimmer Effect!⚡️
Blue shimmer!
Teal shimmer!
GitHub: carloslfu/shadcn-shimmer

Install via shadcn:

npx shadcn@latest add https://carlosgalarza.com/ui/shimmer.json

Code Examples

1. Simple Shimmer

Preview:

Loading content...
import { Shimmer } from "@/components/ui/shimmer";

export default function MyComponent() {
  return (
    <Shimmer>Loading content...</Shimmer>
  );
}

2. Custom Timing

Preview:

Custom timing shimmer!
Fast (0.3s)Slow (5s)
import { Shimmer } from "@/components/ui/shimmer";

export default function CustomTimingExample() {
  return (
    <Shimmer asChild shimmerDuration={2}>
      <span>Custom timing shimmer!</span>
    </Shimmer>
  );
}

3. Custom Color (Teal)

Preview:

Custom teal shimmer!
import { Shimmer } from "@/components/ui/shimmer";

export default function TealShimmerExample() {
  return (
    <Shimmer
      asChild
      shimmerDuration={1.5}
      className="[--shimmer-base:theme(colors.teal.800)] [--shimmer-highlight:theme(colors.teal.200)]"
    >
      <span>Custom teal shimmer!</span>
    </Shimmer>
  );
}