✨ Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.

Getting Started

Templates

Components

Special Effects

Animations

Text Animations

Device Mocks

Buttons

Backgrounds

Community

Particles

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.

Particles

"use client"

import { useEffect, useState } from "react"
import { useTheme } from "next-themes"

import { Particles } from "@/registry/magicui/particles"

export function ParticlesDemo() {
  const { resolvedTheme } = useTheme()
  const [color, setColor] = useState("#ffffff")

  useEffect(() => {
    setColor(resolvedTheme === "dark" ? "#ffffff" : "#000000")
  }, [resolvedTheme])

  return (
    <div className="bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border">
      <span className="pointer-events-none z-10 text-center text-8xl leading-none font-semibold whitespace-pre-wrap">
        Particles
      </span>
      <Particles
        className="absolute inset-0 z-0"
        quantity={100}
        ease={80}
        color={color}
        refresh
      />
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add @magicui/particles

Usage

import { Particles } from "@/components/ui/particles"

<div className="relative h-[500px] w-full overflow-hidden">
  <Particles />
</div>

Props

Prop	Type	Default	Description
`className`	`string`	`-`	The class name for the component
`quantity`	`number`	`100`	The number of particles
`staticity`	`number`	`50`	The staticity of the particles
`ease`	`number`	`50`	The ease of the particles
`size`	`number`	`0.4`	The size of the particles
`refresh`	`boolean`	`false`	Whether to refresh the particles
`color`	`string`	`#ffffff`	The color of the particles
`vx`	`number`	`0`	The x velocity of the particles
`vy`	`number`	`0`	The y velocity of the particles

Orbiting Circles Pixel Image

On This Page

Installation Usage Props

Contribute

Limited Time Offer

Ship Faster with Magic UI Pro

Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.

Next.js 15 + TypeScript ready

Copy, paste, customize in minutes

Save 100+ hours of development

$199once

Get Lifetime Access

Trusted by 5,000+ developers