Particles
A versatile and performant component for creating engaging, animated content displays with smooth infinite scrolling animations. Perfect for showcasing client logos, testimonials, feature highlights, and promotional content with customizable speed, direction, and responsive design.
A particles component
Installation
npx shadcn@latest add https://badtz-ui.com/r/particles.jsonInstall the following dependencies:
npm install clsx tailwind-merge @tsparticles/react @tsparticles/slimAdd the utils file to the @/lib folder
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}Copy and paste the following code into your project.
Component: particles
Update the import paths to match your project setup.
Examples
Displays a particles component
Displays a particles component with snow variant
Usage
import { Particles } from "@/components/ui/particles";<Particles variant="snow" />Props
particles props.
Type information not available
Credits
All credits goes to tsparticles.