Registries
ActiveFeaturedAnimated components21,473

@magicui

Animated components · MIT · data updated 2026-07-08

Magic UI is a flagship open-source animated component library for design engineers, offering 150+ free React components and effects built with TypeScript, Tailwind CSS, and Motion. Categories span Backgrounds (Flickering Grid, Aurora, Interactive), Text effects (Aurora Text, Comic Text, Blur Fade), Buttons (Magnetic, Animated Shiny), Cards (Bento Grid, Card Glare), Borders (Magic Border, Beam Shine), Devices, Social Proof (Avatar Circles, Marquee), and standalone Templates. Companion to shadcn/ui (same install pattern). 100% free, MIT licensed, 20k+ GitHub stars. Use for: adding high-impact animated hero sections, bento grids, shimmer effects, and interactive backgrounds to SaaS landing pages or portfolios built on shadcn/ui.

WebsiteDocsGitHub

Install

npx shadcn@latest add https://magicui.design/r/registry

Health

StatusActive
Last commit5 days ago
LicenseMIT
Open issues1
ArchivedNo
Stars21,473

Components (247)

indexmagic-cardandroidwarp-backgroundline-shadow-textaurora-textmorphing-textscroll-progresslenspointersmooth-cursorprogressive-blurneon-gradient-cardnoise-texturemeteorsgrid-patternhexagon-patternstriped-patterninteractive-grid-patterndot-patternflickering-gridhero-video-dialogcode-comparisonmarqueeglobeglyph-matrixglare-hovershimmer-buttontweet-cardclient-tweet-cardbento-gridparticlesnumber-tickerrippleretro-gridanimated-listanimated-shiny-textanimated-grid-patternborder-beamanimated-beamtext-revealdia-text-revealhyper-textanimated-gradient-textorbiting-circlesdockword-rotateavatar-circlestyping-animationsparkles-textspinning-textcomic-texticon-cloudtext-animatescroll-based-velocityshiny-buttonshine-borderanimated-circular-progress-barconfetticool-mode
Components: index, magic-card, android, warp-background, line-shadow-text, aurora-text, morphing-text, scroll-progress, lens, pointer, smooth-cursor, progressive-blur, neon-gradient-card, noise-texture, meteors, grid-pattern, hexagon-pattern, striped-pattern, interactive-grid-pattern, dot-pattern, flickering-grid, hero-video-dialog, code-comparison, marquee, globe, glyph-matrix, glare-hover, shimmer-button, tweet-card, client-tweet-card, bento-grid, particles, number-ticker, ripple, retro-grid, animated-list, animated-shiny-text, animated-grid-pattern, border-beam, animated-beam, text-reveal, dia-text-reveal, hyper-text, animated-gradient-text, orbiting-circles, dock, word-rotate, avatar-circles, typing-animation, sparkles-text, spinning-text, comic-text, icon-cloud, text-animate, scroll-based-velocity, shiny-button, shine-border, animated-circular-progress-bar, confetti, cool-mode, pulsating-button, ripple-button, file-tree, blur-fade, safari, iphone, rainbow-button, interactive-hover-button, terminal, video-text, pixel-image, highlighter, animated-theme-toggler, light-rays, dotted-map, backlight, kinetic-text, text-3d-flip, magic-card-demo, magic-card-demo-2, android-demo, android-demo-2, android-demo-3, warp-background-demo, line-shadow-text-demo, aurora-text-demo, morphing-text-demo, scroll-progress-demo, lens-demo, lens-demo-2, lens-demo-3, pointer-demo-1, smooth-cursor-demo, progressive-blur-demo, neon-gradient-card-demo, noise-texture-demo, noise-texture-demo-2, noise-texture-demo-3, noise-texture-demo-4, meteors-demo

Preview

Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.

@magicui · index

npx shadcn@latest add https://magicui.design/r/index
View source