Sparkles Text

Random sparkle SVG stars that appear and fade around your text. Configurable count, color, and speed.

Sparkle ✨

Code

import { SparklesText } from "@/components/ui/sparkles-text"

export default function Example() {
  return (
    <SparklesText className="text-3xl font-bold" count={8}>
      Magic Text ✨
    </SparklesText>
  )
}

Installation

$npx particleui-cli add sparkles-text

Usage

TSX

import { SparklesText } from "@/components/ui/sparkles-text"

export default function Example() {
  return (
    <SparklesText className="text-3xl font-bold" count={8}>
      Magic Text ✨
    </SparklesText>
  )
}

Props

Prop	Type	Default	Required
children	React.ReactNode	—	yes
className	string	—	no
count	number	—	no

Details

Source filecomponents/ui/sparkles-text.tsx

Typeui

Categoriestext, particles

npm dependencies

Registry deps

Claude skill—