Particle Hero

Pro

Full-viewport hero section with animated canvas particle system, connect lines, and configurable electric color palette. Pro component.

Pro component — requires an active license. Get access →

Build faster

Animated particle canvas hero section.

Installation

Add your token to .env

Get a token from your dashboard, then add it to .env:

bash

PARTICLEUI_TOKEN=your-token-here

Add the registry to components.json

Wire up the authenticated registry so the CLI can resolve Pro components:

bash

"registries": {
  "@particleui": {
    "url": "https://particleui.dev/r/react/{name}.json",
    "headers": { "Authorization": "Bearer ${PARTICLEUI_TOKEN}" }
  }
}

Run the CLI

bash

npx particleui-cli add particle-hero

Usage

TSX

import { ParticleHero } from "@/components/blocks/particle-hero"

export default function Page() {
  return (
    <ParticleHero
      headline="Build something amazing"
      subtext="Animated particle canvas hero. Pro component."
      cta={[
        { label: "Get started", href: "/docs", variant: "electric" },
        { label: "View pricing", href: "/pricing", variant: "outline" },
      ]}
      particleCount={80}
      connectLines
    />
  )
}

Props

Prop	Type	Default	Required
headline	React.ReactNode	—	yes
subtext	string	—	no
cta	CTA[]	`[]`	no
particleCount	number	`80`	no
particleColor	"electric" \| "particle" \| string	`"electric"`	no
speed	"slow" \| "medium" \| "fast"	`"medium"`	no
connectLines	boolean	`true`	no
className	string	—	no

Details

Source filecomponents/blocks/particle-hero.tsx

Typeblock

Categoriesblocks, hero, animations

npm dependenciesclsx, tailwind-merge, class-variance-authority

Registry deps@particleui/glow-button

Claude skillBundled — installs to ~/.claude/skills/