Skip to content
Magic UI SolidMagicUI Solid
Menu
Getting Started
IntroductionInstallation
Components
MarqueeTerminalHero Video DialogBento GridAnimated ListDockGlobeTweet CardOrbiting CirclesAvatar CirclesLensIcon CloudPointerSmooth CursorProgressive BlurDotted Map
Special Effects
Animated BeamBorder BeamShine BorderMagic CardGlare HoverMeteorsConfettiParticlesTheme Toggler
Animations
Blur Fade
Text Animations
Text AnimateTyping AnimationLine Shadow TextAurora TextVideo TextNumber TickerAnimated Shiny TextAnimated Gradient TextText RevealDia Text RevealHyper TextWord RotateScroll Based VelocitySparkles TextMorphing TextSpinning TextText HighlighterText 3D Flip
Device Mocks
SafariiPhoneAndroid
Buttons
Rainbow ButtonShimmer ButtonRipple Button
Backgrounds
Flickering GridAnimated Grid PatternRetro GridRippleDot PatternGrid PatternHexagon PatternStriped PatternInteractive Grid PatternLight RaysNoise Texture
Community
Shiny ButtonFile TreeCode ComparisonScroll ProgressNeon Gradient CardComic TextKinetic TextCool ModePixel ImagePulsating ButtonWarp BackgroundInteractive Hover ButtonAnimated Circular Progress BarBacklightGlyph Matrix

Sparkles Text

A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.

Magic UI
@/demos/SparklesTextDemo.tsx
import { SparklesText } from '@/registry/magicui/sparkles-text'


export function SparklesTextDemo() {
  return <SparklesText>Magic UI</SparklesText>
}

Installation

Section titled “Installation”
Terminal window
pnpm dlx shadcn@latest add @magicui-solid/sparkles-text

Import

Section titled “Import”
import { SparklesText } from '@/components/magicui/sparkles-text'

Usage

Section titled “Usage”
<SparklesText>Sparkles Text</SparklesText>

Props

Section titled “Props”
Prop Type Default Description
children string - The content to display
class 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

Section titled “Credits”

Original:

magicui.design/docs/components/sparkles-text