Components
Loading preview...
Particles are a fun way to add some visual flair to your website. They can be used to create a sense of depth, movement, and interactivity.
npx shadcn@latest add https://21st.dev/r/dillionverma/particles"use client"
import { useEffect, useState } from "react"
import { useTheme } from "next-themes"
import { Particles } from "@/components/ui/particles"
export function ParticlesDemo() {
const { theme } = useTheme()
const [color, setColor] = useState("#ffffff")
useEffect(() => {
setColor(theme === "dark" ? "#ffffff" : "#000000")
}, [theme])
return (
<div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
<span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
Particles
</span>
<Particles
className="absolute inset-0"
quantity={100}
ease={80}
color={color}
refresh
/>
</div>
)
}