Getting Started
Blocks
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
Magic UI
import { SparklesText } from "@/registry/magicui/sparkles-text";
export function SparklesTextDemo() {
return <SparklesText>Magic UI</SparklesText>;
}
Installation
pnpm dlx shadcn@latest add @magicui/sparkles-text
Usage
import { SparklesText } from "@/components/magicui/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
Limited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
✓
Next.js 15 + TypeScript ready✓
Copy, paste, customize in minutes✓
Save 100+ hours of development