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

Introduction

Get started with magicui-solid — animated UI components ported from Magic UI for SolidJS.

magicui-solid is a port of Magic UI components for SolidJS.

It provides beautifully designed, animated UI components that you can copy, paste, and customize into your SolidJS projects.

Philosophy

Section titled “Philosophy”

Great design builds trust. The same care we put into animations and interactions reflects the quality your users can expect from your product.

magicui-solid brings that same attention to detail to the SolidJS ecosystem, letting you create polished user experiences without starting from scratch.

This library is heavily inspired by Magic UI and shadcn/ui.

Getting Started

Section titled “Getting Started”

Head over to the Installation guide to add magicui-solid components to your project.