Animated componentspro available
@blockdex
Animated components · data updated 2026-10-17
Discover a verified open-source cohort from Magic UI and EvilCharts through BlockDex; installs resolve to the original publishers.
3daccessibilityanimationbackgroundsblocksbuttonscardschartsiconsloadersmapsmediamobilenavigationoverlayspaymentspro-availableretrotext-effectstheming
Install
npx shadcn@latest add https://blockdex.dev/shadcn/registry.jsonHealth
StatusUnknown
Last commit—
License—
Open issues—
ArchivedNo
Stars—
Components (359)
magicui--indexmagicui--magic-cardmagicui--androidmagicui--warp-backgroundmagicui--line-shadow-textmagicui--aurora-textmagicui--morphing-textmagicui--scroll-progressmagicui--lensmagicui--pointermagicui--smooth-cursormagicui--progressive-blurmagicui--neon-gradient-cardmagicui--noise-texturemagicui--meteorsmagicui--grid-patternmagicui--hexagon-patternmagicui--striped-patternmagicui--interactive-grid-patternmagicui--dot-patternmagicui--flickering-gridmagicui--hero-video-dialogmagicui--code-comparisonmagicui--marqueemagicui--globemagicui--glyph-matrixmagicui--glare-hovermagicui--shimmer-buttonmagicui--tweet-cardmagicui--client-tweet-cardmagicui--bento-gridmagicui--particlesmagicui--number-tickermagicui--ripplemagicui--retro-gridmagicui--animated-listmagicui--animated-shiny-textmagicui--animated-grid-patternmagicui--border-beammagicui--animated-beammagicui--text-revealmagicui--dia-text-revealmagicui--hyper-textmagicui--animated-gradient-textmagicui--orbiting-circlesmagicui--dockmagicui--word-rotatemagicui--avatar-circlesmagicui--typing-animationmagicui--sparkles-textmagicui--spinning-textmagicui--comic-textmagicui--icon-cloudmagicui--text-animatemagicui--scroll-based-velocitymagicui--shiny-buttonmagicui--shine-bordermagicui--animated-circular-progress-barmagicui--confettimagicui--cool-mode
Components: magicui--index, magicui--magic-card, magicui--android, magicui--warp-background, magicui--line-shadow-text, magicui--aurora-text, magicui--morphing-text, magicui--scroll-progress, magicui--lens, magicui--pointer, magicui--smooth-cursor, magicui--progressive-blur, magicui--neon-gradient-card, magicui--noise-texture, magicui--meteors, magicui--grid-pattern, magicui--hexagon-pattern, magicui--striped-pattern, magicui--interactive-grid-pattern, magicui--dot-pattern, magicui--flickering-grid, magicui--hero-video-dialog, magicui--code-comparison, magicui--marquee, magicui--globe, magicui--glyph-matrix, magicui--glare-hover, magicui--shimmer-button, magicui--tweet-card, magicui--client-tweet-card, magicui--bento-grid, magicui--particles, magicui--number-ticker, magicui--ripple, magicui--retro-grid, magicui--animated-list, magicui--animated-shiny-text, magicui--animated-grid-pattern, magicui--border-beam, magicui--animated-beam, magicui--text-reveal, magicui--dia-text-reveal, magicui--hyper-text, magicui--animated-gradient-text, magicui--orbiting-circles, magicui--dock, magicui--word-rotate, magicui--avatar-circles, magicui--typing-animation, magicui--sparkles-text, magicui--spinning-text, magicui--comic-text, magicui--icon-cloud, magicui--text-animate, magicui--scroll-based-velocity, magicui--shiny-button, magicui--shine-border, magicui--animated-circular-progress-bar, magicui--confetti, magicui--cool-mode, magicui--pulsating-button, magicui--ripple-button, magicui--file-tree, magicui--blur-fade, magicui--safari, magicui--iphone, magicui--rainbow-button, magicui--interactive-hover-button, magicui--terminal, magicui--video-text, magicui--pixel-image, magicui--highlighter, magicui--animated-theme-toggler, magicui--light-rays, magicui--dotted-map, magicui--backlight, magicui--kinetic-text, magicui--text-3d-flip, magicui--floating-3d-particles, magicui--utils, evilcharts--recharts-chart, evilcharts--recharts-tooltip, evilcharts--recharts-legend, evilcharts--recharts-dot, evilcharts--recharts-brush, evilcharts--recharts-background, evilcharts--echarts-chart, evilcharts--echarts-tooltip, evilcharts--echarts-legend, evilcharts--echarts-dot, evilcharts--echarts-brush, evilcharts--echarts-area-chart, evilcharts--echarts-line-chart, evilcharts--echarts-bar-chart, evilcharts--echarts-composed-chart, evilcharts--echarts-radar-chart, evilcharts--echarts-pie-chart, evilcharts--echarts-radial-chart, evilcharts--echarts-sankey-chart, evilcharts--recharts-area-chart, evilcharts--recharts-line-chart, evilcharts--recharts-bar-chart, evilcharts--recharts-composed-chart, evilcharts--recharts-pie-chart, evilcharts--recharts-radial-chart, evilcharts--recharts-radar-chart, evilcharts--recharts-sankey-chart, evilcharts--ex-hover-highlight-echarts-area-chart, evilcharts--ex-echarts-area-chart, evilcharts--ex-svg-renderer-echarts-area-chart, evilcharts--ex-brush-echarts-area-chart, evilcharts--ex-buffer-echarts-area-chart, evilcharts--ex-hover-reveal-echarts-area-chart, evilcharts--ex-animated-dashed-stroke-echarts-area-chart, evilcharts--ex-bump-curve-type-echarts-area-chart, evilcharts--ex-dashed-stroke-echarts-area-chart, evilcharts--ex-default-type-echarts-area-chart, evilcharts--ex-dotted-area-variant-echarts-area-chart, evilcharts--ex-expanded-type-echarts-area-chart, evilcharts--ex-gradient-area-variant-echarts-area-chart, evilcharts--ex-gradient-colors-echarts-area-chart, evilcharts--ex-gradient-colors-bump-echarts-area-chart, evilcharts--ex-gradient-reverse-area-variant-echarts-area-chart, evilcharts--ex-hatched-area-variant-echarts-area-chart, evilcharts--ex-lines-area-variant-echarts-area-chart, evilcharts--ex-loading-state-echarts-area-chart, evilcharts--ex-monotoney-curve-type-echarts-area-chart, evilcharts--ex-solid-area-variant-echarts-area-chart, evilcharts--ex-solid-stroke-echarts-area-chart, evilcharts--ex-stacked-type-echarts-area-chart, evilcharts--ex-step-curve-type-echarts-area-chart, evilcharts--ex-echarts-line-chart, evilcharts--ex-svg-renderer-echarts-line-chart, evilcharts--ex-gradient-colors-echarts-line-chart, evilcharts--ex-gradient-colors-bump-echarts-line-chart, evilcharts--ex-loading-state-echarts-line-chart, evilcharts--ex-bump-curve-type-echarts-line-chart, evilcharts--ex-step-curve-type-echarts-line-chart, evilcharts--ex-monotoney-curve-type-echarts-line-chart, evilcharts--ex-solid-stroke-echarts-line-chart, evilcharts--ex-dashed-stroke-echarts-line-chart, evilcharts--ex-animated-dashed-stroke-echarts-line-chart, evilcharts--ex-glowing-desktop-echarts-line-chart, evilcharts--ex-glowing-mobile-echarts-line-chart, evilcharts--ex-buffer-echarts-line-chart, evilcharts--ex-hover-reveal-echarts-line-chart, evilcharts--ex-dot-default-echarts-line-chart, evilcharts--ex-dot-border-echarts-line-chart, evilcharts--ex-dot-colored-border-echarts-line-chart, evilcharts--ex-dot-ping-echarts-line-chart, evilcharts--ex-legend-square-echarts-line-chart, evilcharts--ex-legend-circle-echarts-line-chart, evilcharts--ex-legend-circle-outline-echarts-line-chart, evilcharts--ex-legend-rounded-square-echarts-line-chart, evilcharts--ex-legend-rounded-square-outline-echarts-line-chart, evilcharts--ex-legend-vertical-bar-echarts-line-chart, evilcharts--ex-legend-horizontal-bar-echarts-line-chart, evilcharts--ex-echarts-bar-chart, evilcharts--ex-svg-renderer-echarts-bar-chart, evilcharts--ex-buffer-echarts-bar-chart, evilcharts--ex-gradient-colors-echarts-bar-chart, evilcharts--ex-loading-state-echarts-bar-chart, evilcharts--ex-default-variant-echarts-bar-chart, evilcharts--ex-expandable-variant-echarts-bar-chart, evilcharts--ex-max-highlight-echarts-bar-chart, evilcharts--ex-blocks-variant-echarts-bar-chart, evilcharts--ex-hatched-variant-echarts-bar-chart, evilcharts--ex-duotone-variant-echarts-bar-chart, evilcharts--ex-duotone-reverse-variant-echarts-bar-chart, evilcharts--ex-gradient-variant-echarts-bar-chart, evilcharts--ex-stripped-variant-echarts-bar-chart, evilcharts--ex-stacked-type-echarts-bar-chart, evilcharts--ex-percent-type-echarts-bar-chart, evilcharts--ex-horizontal-layout-echarts-bar-chart, evilcharts--ex-hover-highlight-echarts-bar-chart, evilcharts--ex-glowing-desktop-echarts-bar-chart, evilcharts--ex-glowing-mobile-echarts-bar-chart, evilcharts--ex-tooltip-default-echarts-bar-chart, evilcharts--ex-tooltip-frosted-glass-echarts-bar-chart, evilcharts--ex-chart-config-default-echarts-bar-chart, evilcharts--ex-chart-config-icons-echarts-bar-chart, evilcharts--ex-echarts-composed-chart, evilcharts--ex-svg-renderer-echarts-composed-chart, evilcharts--ex-gradient-colors-echarts-composed-chart, evilcharts--ex-loading-state-echarts-composed-chart, evilcharts--ex-hatched-variant-echarts-composed-chart, evilcharts--ex-duotone-variant-echarts-composed-chart, evilcharts--ex-gradient-variant-echarts-composed-chart, evilcharts--ex-stripped-variant-echarts-composed-chart, evilcharts--ex-dashed-stroke-echarts-composed-chart, evilcharts--ex-animated-dashed-stroke-echarts-composed-chart, evilcharts--ex-bump-curve-echarts-composed-chart, evilcharts--ex-dots-echarts-composed-chart, evilcharts--ex-hover-highlight-echarts-composed-chart, evilcharts--ex-glowing-echarts-composed-chart, evilcharts--ex-echarts-radar-chart, evilcharts--ex-svg-renderer-echarts-radar-chart, evilcharts--ex-lines-variant-echarts-radar-chart, evilcharts--ex-circle-grid-echarts-radar-chart, evilcharts--ex-gradient-colors-echarts-radar-chart, evilcharts--ex-loading-state-echarts-radar-chart, evilcharts--ex-echarts-pie-chart, evilcharts--ex-svg-renderer-echarts-pie-chart, evilcharts--ex-gradient-colors-echarts-pie-chart, evilcharts--ex-donut-echarts-pie-chart, evilcharts--ex-padded-echarts-pie-chart, evilcharts--ex-overlapping-padded-echarts-pie-chart, evilcharts--ex-labels-echarts-pie-chart, evilcharts--ex-loading-state-echarts-pie-chart, evilcharts--ex-outside-labels-echarts-pie-chart, evilcharts--ex-echarts-radial-chart, evilcharts--ex-svg-renderer-echarts-radial-chart, evilcharts--ex-semi-variant-echarts-radial-chart, evilcharts--ex-gradient-colors-echarts-radial-chart, evilcharts--ex-loading-state-echarts-radial-chart, evilcharts--ex-echarts-sankey-chart, evilcharts--ex-svg-renderer-echarts-sankey-chart, evilcharts--ex-gradient-colors-echarts-sankey-chart, evilcharts--ex-loading-state-echarts-sankey-chart, evilcharts--ex-solid-link-variant-echarts-sankey-chart, evilcharts--ex-source-link-variant-echarts-sankey-chart, evilcharts--ex-labeled-nodes-echarts-sankey-chart, evilcharts--ex-outside-labels-echarts-sankey-chart, evilcharts--ex-solid-labeled-nodes-echarts-sankey-chart, evilcharts--ex-area-chart, evilcharts--ex-brush-area-chart, evilcharts--ex-gradient-colors-area-chart, evilcharts--ex-gradient-colors-bump-area-chart, evilcharts--ex-loading-state-area-chart, evilcharts--ex-default-type-area-chart, evilcharts--ex-stacked-type-area-chart, evilcharts--ex-expanded-type-area-chart, evilcharts--ex-bump-curve-type-area-chart, evilcharts--ex-step-curve-type-area-chart, evilcharts--ex-monotoney-curve-type-area-chart, evilcharts--ex-solid-stroke-area-chart, evilcharts--ex-dashed-stroke-area-chart, evilcharts--ex-animated-dashed-stroke-area-chart, evilcharts--ex-gradient-area-variant-area-chart, evilcharts--ex-gradient-reverse-area-variant-area-chart, evilcharts--ex-solid-area-variant-area-chart, evilcharts--ex-dotted-area-variant-area-chart, evilcharts--ex-lines-area-variant-area-chart, evilcharts--ex-hatched-area-variant-area-chart, evilcharts--ex-line-chart, evilcharts--ex-dot-default-line-chart, evilcharts--ex-dot-border-line-chart, evilcharts--ex-dot-colored-border-line-chart, evilcharts--ex-gradient-colors-line-chart, evilcharts--ex-gradient-colors-bump-line-chart, evilcharts--ex-loading-state-line-chart, evilcharts--ex-bump-curve-type-line-chart, evilcharts--ex-step-curve-type-line-chart, evilcharts--ex-monotoney-curve-type-line-chart, evilcharts--ex-solid-stroke-line-chart, evilcharts--ex-dashed-stroke-line-chart, evilcharts--ex-animated-dashed-stroke-line-chart, evilcharts--ex-glowing-desktop-line-chart, evilcharts--ex-glowing-mobile-line-chart, evilcharts--ex-buffer-line-chart, evilcharts--ex-bg-dots-line-chart, evilcharts--ex-bg-grid-line-chart, evilcharts--ex-bg-cross-hatch-line-chart, evilcharts--ex-bg-diagonal-lines-line-chart, evilcharts--ex-bg-plus-line-chart, evilcharts--ex-bg-falling-triangles-line-chart, evilcharts--ex-bg-4-pointed-star-line-chart, evilcharts--ex-bg-tiny-checkers-line-chart, evilcharts--ex-bg-overlapping-circles-line-chart, evilcharts--ex-bg-wiggle-lines-line-chart, evilcharts--ex-bg-bubbles-line-chart, evilcharts--ex-buffer-bar-chart, evilcharts--ex-bar-chart, evilcharts--ex-gradient-colors-bar-chart, evilcharts--ex-loading-state-bar-chart, evilcharts--ex-default-variant-bar-chart, evilcharts--ex-hatched-variant-bar-chart, evilcharts--ex-duotone-variant-bar-chart, evilcharts--ex-duotone-reverse-variant-bar-chart, evilcharts--ex-gradient-variant-bar-chart, evilcharts--ex-stripped-variant-bar-chart, evilcharts--ex-stacked-type-bar-chart, evilcharts--ex-percent-type-bar-chart, evilcharts--ex-horizontal-layout-bar-chart, evilcharts--ex-hover-highlight-bar-chart, evilcharts--ex-glowing-desktop-bar-chart, evilcharts--ex-glowing-mobile-bar-chart, evilcharts--ex-composed-chart, evilcharts--ex-gradient-colors-composed-chart, evilcharts--ex-loading-state-composed-chart, evilcharts--ex-hatched-variant-composed-chart, evilcharts--ex-duotone-variant-composed-chart, evilcharts--ex-gradient-variant-composed-chart, evilcharts--ex-stripped-variant-composed-chart, evilcharts--ex-dashed-stroke-composed-chart, evilcharts--ex-animated-dashed-stroke-composed-chart, evilcharts--ex-bump-curve-composed-chart, evilcharts--ex-dots-composed-chart, evilcharts--ex-hover-highlight-composed-chart, evilcharts--ex-glowing-composed-chart, evilcharts--ex-pie-chart, evilcharts--ex-gradient-colors-pie-chart, evilcharts--ex-donut-pie-chart, evilcharts--ex-padded-pie-chart, evilcharts--ex-overlapping-padded-pie-chart, evilcharts--ex-labels-pie-chart, evilcharts--ex-loading-state-pie-chart, evilcharts--ex-glowing-pie-chart, evilcharts--ex-radial-chart, evilcharts--ex-semi-variant-radial-chart, evilcharts--ex-gradient-colors-radial-chart, evilcharts--ex-loading-state-radial-chart, evilcharts--ex-radar-chart, evilcharts--ex-lines-variant-radar-chart, evilcharts--ex-circle-grid-radar-chart, evilcharts--ex-gradient-colors-radar-chart, evilcharts--ex-loading-state-radar-chart, evilcharts--ex-glowing-radar-chart, evilcharts--ex-sankey-chart, evilcharts--ex-gradient-colors-sankey-chart, evilcharts--ex-loading-state-sankey-chart, evilcharts--ex-solid-link-variant-sankey-chart, evilcharts--ex-source-link-variant-sankey-chart, evilcharts--ex-labeled-nodes-sankey-chart, evilcharts--ex-outside-labels-sankey-chart, evilcharts--ex-solid-labeled-nodes-sankey-chart, evilcharts--ex-tooltip-default-bar-chart, evilcharts--ex-tooltip-frosted-glass-bar-chart, evilcharts--ex-legend-square-line-chart, evilcharts--ex-legend-circle-line-chart, evilcharts--ex-legend-circle-outline-line-chart, evilcharts--ex-legend-rounded-square-line-chart, evilcharts--ex-legend-rounded-square-outline-line-chart, evilcharts--ex-legend-vertical-bar-line-chart, evilcharts--ex-legend-horizontal-bar-line-chart, evilcharts--ex-chart-config-default-bar-chart, evilcharts--ex-chart-config-icons-bar-chart, evilcharts--monospace-bar-chart, evilcharts--hover-trace-bar-chart, evilcharts--grid-bar-chart, evilcharts--isometric-bar-chart, evilcharts--latency-echarts-area-chart, evilcharts--portfolio-echarts-area-chart, evilcharts--benchmark-echarts-area-chart, evilcharts--audience-echarts-area-chart, evilcharts--market-share-echarts-pie-chart, evilcharts--progress-rings-echarts-pie-chart, evilcharts--budget-echarts-radial-chart, evilcharts--ride-echarts-radial-chart, evilcharts--cache-tiers-echarts-radial-chart, evilcharts--revenue-mix-echarts-pie-chart, evilcharts--reliability-score-echarts-pie-chart, evilcharts--payouts-echarts-line-chart, evilcharts--shipments-echarts-line-chart, evilcharts--grid-echarts-bar-chart, evilcharts--monospace-echarts-bar-chart, evilcharts--peak-echarts-bar-chart, evilcharts--allocation-echarts-sankey-chart, evilcharts--pipeline-echarts-sankey-chartPreview
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.
@blockdex · magicui--index
npx shadcn@latest add https://blockdex.dev/shadcn/magicui--index.jsonView source