ActiveFeaturedAnimated components253
@jolyui
Animated components · MIT · data updated 2026-07-28
An open-source library of 50+ animated React components extending shadcn/ui, built with Framer Motion for 60fps animations, Tailwind CSS v4, TypeScript, and Radix UI primitives. Components visible in the registry (195 items including demos) include Animated Beam, Bento Grid, Expanded Map, Dock, Image Comparison, Animated Tooltip, Rainbow Button, File Tree, GitHub Contributors, Glitch Text, Phone Card, Rotate Text, Magnetic, Code Block, Typewriter Text, Velocity Morph, Number Counter, Highlight Text, Command Palette, AI Prompt Box, Date Wheel Picker, Liquid Metal Button, Morphing Cursor, Falling Text, and Gooey Text Morphing. Works with Next.js 14+ and React 19. Free and MIT-licensed. Use for: adding high-quality, motion-rich interactive components to React/Next.js apps that need a polished, premium feel beyond standard shadcn primitives.
accessibilityaestheticaianimationaudioblocksbuttonscardsdesign-systemdeveloper-toolsformsglassmorphismhooksiconsmapsmarketingmediamobilenavigationoverlaystablestext-effectstheming
Install
npx shadcn@latest add https://www.jolyui.dev/r/registry.jsonHealth
StatusActive
Last commit1 month ago
LicenseMIT
Open issues1
ArchivedNo
Stars253
Components (199)
styleanimated-beamanimated-theme-toggleanimated-tablebento-gridexpanded-mapbuttondockimage-comparisonanimated-tooltipanimated-toastrainbow-buttonfile-treegithub-contributorsglitch-textphone-cardrotate-textlazy-videovercel-tabsmagneticvideo-playercalendercharacter-morphcode-blocktext-morphingscroll-textsegmented-buttontypewritter-textvelocity-morphnumber-counterhighlight-textcommand-palettegithub-stargooey-text-morphingfeedback-widgetimage-sphereinfinite-ribbonhover-previewai-prompt-boxdate-wheel-pickerliquid-metal-buttonmorphing-cursorfalling-textshutter-textutilsuse-mobiletheme-daylighttheme-midnighttheme-emeraldanimated-beam-demoanimated-beam-curved-demoanimated-beam-multiple-demoanimated-beam-bidirectional-demoanimated-theme-toggle-demoanimated-theme-toggle-sizes-demoanimated-theme-toggle-navbar-demodock-demoexpanded-map-demoexpanded-map-locations-demoexpanded-map-dark-demo
Components: style, animated-beam, animated-theme-toggle, animated-table, bento-grid, expanded-map, button, dock, image-comparison, animated-tooltip, animated-toast, rainbow-button, file-tree, github-contributors, glitch-text, phone-card, rotate-text, lazy-video, vercel-tabs, magnetic, video-player, calender, character-morph, code-block, text-morphing, scroll-text, segmented-button, typewritter-text, velocity-morph, number-counter, highlight-text, command-palette, github-star, gooey-text-morphing, feedback-widget, image-sphere, infinite-ribbon, hover-preview, ai-prompt-box, date-wheel-picker, liquid-metal-button, morphing-cursor, falling-text, shutter-text, utils, use-mobile, theme-daylight, theme-midnight, theme-emerald, animated-beam-demo, animated-beam-curved-demo, animated-beam-multiple-demo, animated-beam-bidirectional-demo, animated-theme-toggle-demo, animated-theme-toggle-sizes-demo, animated-theme-toggle-navbar-demo, dock-demo, expanded-map-demo, expanded-map-locations-demo, expanded-map-dark-demo, expanded-map-zoom-demo, dock-macos-demo, dock-social-demo, image-comparison-demo, image-comparison-hover-demo, image-comparison-fade-demo, image-comparison-split-demo, image-comparison-lens-demo, image-comparison-vertical-demo, animated-tooltip-demo, animated-tooltip-animation-demo, animated-tooltip-icon-demo, animated-tooltip-status-demo, animated-tooltip-rich-demo, rainbow-button-demo, animated-toast-demo, animated-toast-minimal-demo, animated-toast-undo-demo, animated-toast-notification-demo, animated-toast-stacked-demo, animated-toast-promise-demo, animated-table-basic-demo, animated-table-sort-demo, animated-table-search-demo, animated-table-select-demo, animated-table-expand-demo, animated-table-column-demo, animated-table-pagination-demo, animated-table-full-demo, bento-grid-custom-demo, bento-grid-portfolio-demo, button-demo, button-variants-demo, button-sizes-demo, button-icon-demo, file-tree-basic-demo, file-tree-expandable-demo, file-tree-full-expanded-demo, file-tree-selectable-demo, file-tree-custom-icons-demo, github-contributors-demo, github-contributors-limit-demo, phone-card-demo, phone-card-image-demo, rotate-text-demo, rotate-text-custom-demo, vercel-tabs-demo, magnetic-demo, magnetic-intensity-demo, magnetic-range-demo, magnetic-action-area-demo, magnetic-cards-demo, video-player-demo, video-player-compact-demo, video-player-playlist-demo, video-player-callbacks-demo, video-player-quality-demo, video-player-captions-demo, video-player-timestamp-demo, command-palette-demo, command-palette-custom-demo, github-star-demo, calendar-basic-demo, calendar-range-demo, calendar-multiple-demo, calendar-time-demo, calendar-presets-demo, calendar-constraints-demo, calendar-full-demo, character-morph-demo, character-morph-custom-demo, code-block-demo, code-block-variants-demo, code-block-animations-demo, code-block-compare-demo, code-block-tabs-demo, code-block-terminal-demo, code-block-glass-demo, text-morphing-demo, text-morphing-variants-demo, glitch-text-demo, glitch-text-custom-demo, scroll-text-demo, scroll-reveal-demo, horizontal-scroll-text-demo, scroll-progress-text-demo, sticky-scroll-text-demo, scroll-text-fade-up-demo, scroll-text-blur-demo, scroll-text-scale-demo, scroll-text-rotate-demo, scroll-text-slide-left-demo, segmented-button-demo, segmented-button-theme-demo, segmented-button-logo-demo, segmented-button-controlled-demo, segmented-button-custom-demo, typewritter-text-demo, typewritter-text-custom-demo, velocity-morph-demo, velocity-morph-custom-demo, number-counter-demo, rolling-counter-demo, circular-counter-demo, stat-counter-demo, highlight-text-demo, highlight-text-variants-demo, highlight-text-colors-demo, gooey-text-morphing-demo, feedback-widget-demo, feedback-widget-custom-label-demo, image-sphere-demo, image-sphere-autorotate-demo, image-sphere-large-demo, image-sphere-custom-demo, hover-preview-demo, hover-preview-portfolio-demo, hover-preview-product-demo, hover-preview-custom-demo, ai-prompt-box-demo, ai-prompt-box-loading-demo, date-wheel-picker-demo, date-wheel-picker-sizes-demo, date-wheel-picker-locale-demo, liquid-metal-button-demo, morphing-cursor-demo, morphing-cursor-custom-demo, morphing-cursor-styled-demo, falling-text-demo, falling-text-scroll-demo, falling-text-click-demo, falling-text-custom-physics-demo, shutter-text-demo, shutter-text-scroll-demo, shutter-text-click-demo, shutter-text-hover-demo, infinite-ribbon-demo, infinite-ribbon-custom-demo, infinite-ribbon-preview-demoPreview
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.