Confetti

Feedback

A bounded decorative celebration using the native Web Animations API.

User-triggered launch celebrationRepeatable burstsPanel-scoped particlesReduced-motion fallback

Responsive viewport — resize the window to explore. Direction and density apply only to this preview. Theme applies to the docs too.

confetti.tsx

"use client";

import { Confetti } from "@/components/ui/confetti";
import { CheckCheck } from "lucide-react";
import { Button } from "@dashboardpack/core/components/ui/button";
import { useState } from "react";
export default function ConfettiExample() {
  const [burst, setBurst] = useState(0);
  return (
    <div className="w-full max-w-lg space-y-4">
      <Confetti burstKey={burst} className="border bg-card">
        <div className="flex min-h-64 flex-col items-center justify-center gap-4 p-8 text-center">
          <span className="flex size-12 items-center justify-center rounded-full bg-primary/10 text-primary">
            <CheckCheck className="size-6" />
          </span>
          <div>
            <h3 className="text-xl font-semibold tracking-tight">
              A launch worth celebrating.
            </h3>
            <p className="mt-2 text-sm leading-6 text-muted-foreground">
              The details are in place. Take a moment to enjoy it.
            </p>
          </div>
          <Button type="button" onClick={() => setBurst((value) => value + 1)}>
            Celebrate launch
          </Button>
          <p role="status" className="text-xs text-muted-foreground">
            {burst ? `Celebration ${burst} complete.` : "Ready when you are."}
          </p>
        </div>
      </Confetti>
      <p className="text-xs text-muted-foreground">
        Decorative motion stays within the card and respects reduced-motion
        preferences.
      </p>
    </div>
  );
}

Usage

Wrap a success card or panel and increment burstKey when a user completes an action. The component animates 36 deterministic decorative particles within that panel. It does not signal business success by itself: keep a real heading/status/action in children. New bursts cancel previous animations. Without Web Animations support the panel still works, and no runtime dependency is needed. No animation runs for an initial zero key.

Import

import { Confetti } from "@/components/ui/confetti";

Shipped as editable source in src/components/ui/confetti.tsx in both apps. Copy the implementation below when moving it to another project. Copy the complete example from Source code for all imports and state. Add "use client" when using hooks or event handlers. See installation and theming for project setup.

Component source

The complete implementation is included in both apps. It uses the React, Radix, Lucide, and shared-core dependencies already installed in Apex. Keep your project’s semantic theme tokens when reusing it.

src/components/ui/confetti.tsx

"use client";
import { useEffect, useRef, type ReactNode } from "react";
import { cn } from "@dashboardpack/core/lib/utils";
export interface ConfettiProps {
  burstKey: number;
  children: ReactNode;
  duration?: number;
  className?: string;
}
export function Confetti({
  burstKey,
  children,
  duration = 1800,
  className,
}: ConfettiProps) {
  const root = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (
      !burstKey ||
      !root.current ||
      matchMedia("(prefers-reduced-motion: reduce)").matches
    )
      return;
    const bounds = root.current.getBoundingClientRect();
    const animations = Array.from(
      root.current.querySelectorAll<HTMLElement>("[data-confetti]"),
    ).flatMap((particle, index) => {
      if (!particle.animate) return [];
      const angle = (index / 36) * Math.PI * 2;
      const distance = 50 + (index % 7) * 18;
      return [
        particle.animate(
          [
            {
              transform: "translate(0, 0) rotate(0deg)",
              opacity: 1,
              offset: 0,
            },
            {
              transform: `translate(${Math.cos(angle) * distance}px, ${-Math.abs(Math.sin(angle)) * distance - 40}px) rotate(${index * 31}deg)`,
              opacity: 1,
              offset: 0.45,
            },
            {
              transform: `translate(${Math.cos(angle) * distance * 1.5}px, ${bounds.height * 0.65}px) rotate(${index * 67}deg)`,
              opacity: 0,
              offset: 1,
            },
          ],
          {
            duration: Math.max(600, Math.min(4000, duration)),
            easing: "cubic-bezier(.2,.6,.5,1)",
          },
        ),
      ];
    });
    return () => animations.forEach((animation) => animation.cancel());
  }, [burstKey, duration]);
  return (
    <div
      ref={root}
      className={cn("relative isolate overflow-hidden rounded-xl", className)}
    >
      {children}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 overflow-hidden"
      >
        {Array.from({ length: 36 }, (_, index) => (
          <span
            key={index}
            data-confetti
            style={{
              insetInlineStart: "50%",
              top: "35%",
              backgroundColor: [
                "var(--primary)",
                "var(--success)",
                "var(--warning)",
                "var(--muted-foreground)",
              ][index % 4],
            }}
            className="absolute h-2 w-1.5 rounded-sm opacity-0"
          />
        ))}
      </div>
    </div>
  );
}

API reference

Common props and defaults. Slot-specific props are named below; native elements also accept their standard HTML attributes. The component TypeScript definitions are the complete type reference.

Confetti props
Prop	Type / Default	Description
burstKey	`number` Default: required	Change a nonzero key to trigger a new burst.
children	`ReactNode` Default: required	Actual card content, actions, and success feedback.
duration	`number` Default: 1800	Animation milliseconds, bounded to 600–4000.
className	`string` Default: —	Extend the container with semantic theme utilities.

Build with these too

Alert Card Spinner