ConfettiAndroid

Celebration particle field — triggerable burst or continuous rain, chart palette, reduced-motion aware.

$ npx lumioui add confetti

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

Props5

count?	number	Particle count. Default 36.
colors?	string[]	Particle colors. Defaults to the theme's chart-1..5 palette.
mode?	"burst" \| "rain"	"burst" fires on demand; "rain" falls continuously while mounted.
fire?	boolean	Declarative trigger — fires a burst on the false→true transition.
className?	string

Confetti — Burstburst.tsx

confetti/variants/burst.tsx open

Celebration particle field — triggerable burst or continuous rain, chart palette, reduced-motion aware.

import { ConfettiBurst } from "@/components/ui/confetti/variants/burst";

export function Example() {
  return (
    <ConfettiBurst />
  );
}

import * as React from "react";
import { View } from "react-native";
import { Confetti, type ConfettiHandle } from "../confetti";
import { Button } from "../../button/button";
import { Glass } from "../../glass/glass";
import { Text } from "../../text/text";

/** ConfettiBurst — a button fires a single celebratory blast over glass. */
export function ConfettiBurst() {
  const ref = React.useRef<ConfettiHandle>(null);
  const [blasts, setBlasts] = React.useState(0);
  // Fire once on mount — a static docs preview should show the component
  // doing its thing, not an empty card waiting for a click.
  React.useEffect(() => {
    const t = setTimeout(() => ref.current?.fire(), 400);
    return () => clearTimeout(t);
  }, []);
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full items-center gap-3 overflow-hidden rounded-2xl p-6">
          <Confetti ref={ref} count={56} />
          <Text className="text-base font-semibold text-foreground">Order placed!</Text>
          <Text variant="muted" className="text-center text-xs">
            #HL-2094 · arrives Thursday
          </Text>
          <Button
            size="sm"
            onPress={() => {
              ref.current?.fire();
              setBlasts((b) => b + 1);
            }}
          >
            Celebrate again
          </Button>
          {blasts > 0 && (
            <Text variant="muted" className="text-xs">
              {blasts} blast{blasts === 1 ? "" : "s"} fired
            </Text>
          )}
        </Glass>
      </View>
  );
}

Confetti — Rainrain.tsx

confetti/variants/rain.tsx open

Celebration particle field — triggerable burst or continuous rain, chart palette, reduced-motion aware.

import { ConfettiRain } from "@/components/ui/confetti/variants/rain";

export function Example() {
  return (
    <ConfettiRain />
  );
}

import * as React from "react";
import { View } from "react-native";
import { Confetti } from "../confetti";
import { Badge } from "../../badge/badge";
import { Glass } from "../../glass/glass";
import { Text } from "../../text/text";

/** ConfettiRain — continuous gentle rain over a glass milestone banner. */
export function ConfettiRain() {
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full items-center gap-2 overflow-hidden rounded-2xl p-6">
          <Confetti mode="rain" count={22} />
          <Badge variant="success">Milestone</Badge>
          <Text className="text-lg font-bold text-foreground">1,000 orders</Text>
          <Text variant="muted" className="text-center text-xs">
            Sakura Ramen just crossed four digits — thanks for lunching with us.
          </Text>
        </Glass>
      </View>
  );
}