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

Shiny Button

A shiny button component with dynamic styles in the dark mode or light mode.

@/demos/ShinyButtonDemo.tsx
import { ShinyButton } from '@/registry/magicui/shiny-button'


export function ShinyButtonDemo() {
  return <ShinyButton>Shiny Button</ShinyButton>
}

Installation

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

Import

Section titled “Import”
import { ShinyButton } from '@/components/magicui/shiny-button'

Usage

Section titled “Usage”
<ShinyButton>Shiny Button</ShinyButton>

Props

Section titled “Props”
Prop Type Description
class string The class name to be applied to the component
children JSX.Element The content to be displayed inside the button

Credits

Section titled “Credits”

Credit to @luis-code for the inspiration behind this component.

Original:

magicui.design/docs/components/shiny-button