Pulse

Pulsing animation placeholder.

Preview

Usage

example.jsx

import { Pulse } from "@/components/ui/pulse";

export default function Example() {
  return <Pulse />;
}

Source Code

Copy this file into components/ui/pulse.jsx in your project.

pulse.jsx

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const Pulse = forwardRef(({ className, ...props }, ref) => (
  <span ref={ref} className={cn("relative inline-flex", className)} {...props}>
    <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-75" />
    <span className="relative inline-flex h-3 w-3 rounded-full bg-primary" />
  </span>
));
Pulse.displayName = "Pulse";

export { Pulse };

Quick Install

Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.

npm install clsx tailwind-merge