Particle Toggles

Component 7

About

A set of decorative animated switch controls (particle burst, spark trail, comet tail, confetti and trail effects) for turning a setting on or off.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Particle Toggles to your project and fits it to your theme.

Code

How Particle Toggles is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  ParticleToggle,
  SparkToggle,
  TrailToggle,
  ConfettiToggle,
  CometToggle,
} from "@/components/ui/toggles-particle";

export default function ToggleParticleDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-8 p-10">
      <ParticleToggle defaultChecked />
      <SparkToggle defaultChecked />
      <TrailToggle defaultChecked />
      <ConfettiToggle defaultChecked />
      <CometToggle defaultChecked />
    </div>
  );
}