║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Sparkles Text date: 2024-05-30 description: A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars. author: Draxx0 published: true

<ComponentPreview name="sparkles-text-demo" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx shadcn@latest add @magicui/sparkles-text

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="sparkles-text" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

Usage

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

<SparklesText>Sparkles Text</SparklesText>

Props

| Prop | Type | Default | Description | | --------------- | -------- | --------------------------------------- | -------------------------------------------------- | | children | string | - | The content to display | | className | string | - | The class name to be applied to the sparkles text. | | sparklesCount | number | 10 | sparkles count that appears on the text | | colors | object | {first: '#A07CFE', second: '#FE8FB5'} | the sparkles colors |

Credits

• Credit to @simonlejeune

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║