Meteors Card

Card with animated meteor/shooting star particles falling through the background.

npx uniqueui add meteors-card

Preview

Meteors Effect

Watch the shooting stars fall through this card's background.

Purple Meteors

Custom colored meteors with extra density.

Usage

import { MeteorsCard } from "@/components/ui/meteors-card";

export default function Example() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-10 text-white">
      <MeteorsCard className="h-full">
        <h3 className="text-xl font-bold mb-2">Meteors Effect</h3>
        <p className="text-neutral-400 text-sm">
          Watch the shooting stars fall through this card's background.
        </p>
      </MeteorsCard>
      <MeteorsCard meteorColor="#a855f7" meteorCount={30} className="h-full">
        <h3 className="text-xl font-bold mb-2 text-purple-200">Purple Meteors</h3>
        <p className="text-purple-300/60 text-sm">Custom colored meteors with extra density.</p>
      </MeteorsCard>
    </div>
  );
}

Props

Prop	Type	Description
`children`	`React.ReactNode`	The payload rendering above the background particle effect.
`className`	`string`	Layout configurations for the wrapping card boundary.
`meteorCount`	`number`	Total integer quantity defining maximum concurrent active meteor particles.
`meteorColor`	`string`	Hex string establishing the primary focal styling of light trails.