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.
import { Particles } from "@/components/ui/particles"
export function ParticlesDemo() {
return (
<div className="relative flex h-[400px] w-full items-center justify-center overflow-hidden rounded-md bg-neutral-950">
<Particles variant="default" />
<span className="font-gilroy pointer-events-none bg-gradient-to-br from-white to-zinc-400 bg-clip-text py-2 text-4xl text-transparent">
Particles
</span>
</div>
)
}
pnpm dlx shadcn@latest add https://badtz-ui.com/r/particles.json
import { Particles } from "@/components/ui/particles"
export function ParticlesDemoStars() {
return (
<div className="relative flex h-[400px] w-full items-center justify-center overflow-hidden rounded-md bg-neutral-950">
<Particles variant="stars" />
<span className="font-gilroy pointer-events-none bg-gradient-to-br from-white to-zinc-400 bg-clip-text py-2 text-4xl text-transparent">
Stars
</span>
</div>
)
}
import { Particles } from "@/components/ui/particles"
export function ParticlesDemoSnow() {
return (
<div className="relative flex h-[400px] w-full items-center justify-center overflow-hidden rounded-md bg-neutral-950">
<Particles variant="snow" />
<span className="font-gilroy pointer-events-none bg-gradient-to-br from-white to-zinc-400 bg-clip-text py-2 text-4xl text-transparent">
Snow
</span>
</div>
)
}
import { Particles } from "@/components/ui/particles";<Particles variant="snow" />particles props.
| Prop | Type | Default |
|---|---|---|
className? | string | - |
variant? | "default" | "snow" | "stars" | "default" |
style? | ParticleStyle | {} |
interactive? | boolean | true |
customOptions? | Record | {} |
All credits goes to tsparticles.