@jolyui

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.

199 components react shadcn-cli MIT

website ↗ github ↗ registry ↗ agent brief (.md) ↗ clone source (199 .json) ↗ clone brief (PROMPT.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://www.jolyui.dev/r/registry.json

pnpm pnpm dlx shadcn@latest add https://www.jolyui.dev/r/registry.json

bun bunx shadcn@latest add https://www.jolyui.dev/r/registry.json

fetch registry curl -s https://www.jolyui.dev/r/registry.json

Components

199 total

style style

npx shadcn@latest add https://www.jolyui.dev/r/style.json

animated-beam ui

npx shadcn@latest add https://www.jolyui.dev/r/animated-beam.json

animated-theme-toggle ui

npx shadcn@latest add https://www.jolyui.dev/r/animated-theme-toggle.json

animated-table ui

npx shadcn@latest add https://www.jolyui.dev/r/animated-table.json

bento-grid ui

npx shadcn@latest add https://www.jolyui.dev/r/bento-grid.json

expanded-map ui

npx shadcn@latest add https://www.jolyui.dev/r/expanded-map.json

button ui

npx shadcn@latest add https://www.jolyui.dev/r/button.json

dock ui

npx shadcn@latest add https://www.jolyui.dev/r/dock.json

image-comparison ui

npx shadcn@latest add https://www.jolyui.dev/r/image-comparison.json

animated-tooltip ui

npx shadcn@latest add https://www.jolyui.dev/r/animated-tooltip.json

animated-toast ui

npx shadcn@latest add https://www.jolyui.dev/r/animated-toast.json

rainbow-button ui

npx shadcn@latest add https://www.jolyui.dev/r/rainbow-button.json

file-tree ui

npx shadcn@latest add https://www.jolyui.dev/r/file-tree.json

github-contributors ui

npx shadcn@latest add https://www.jolyui.dev/r/github-contributors.json

glitch-text ui

npx shadcn@latest add https://www.jolyui.dev/r/glitch-text.json

phone-card ui

npx shadcn@latest add https://www.jolyui.dev/r/phone-card.json

rotate-text ui

npx shadcn@latest add https://www.jolyui.dev/r/rotate-text.json

lazy-video ui

npx shadcn@latest add https://www.jolyui.dev/r/lazy-video.json

vercel-tabs ui

npx shadcn@latest add https://www.jolyui.dev/r/vercel-tabs.json

magnetic ui

npx shadcn@latest add https://www.jolyui.dev/r/magnetic.json

video-player ui

npx shadcn@latest add https://www.jolyui.dev/r/video-player.json

calender ui

npx shadcn@latest add https://www.jolyui.dev/r/calender.json

character-morph ui

npx shadcn@latest add https://www.jolyui.dev/r/character-morph.json

code-block ui

npx shadcn@latest add https://www.jolyui.dev/r/code-block.json

text-morphing ui

npx shadcn@latest add https://www.jolyui.dev/r/text-morphing.json

scroll-text ui

npx shadcn@latest add https://www.jolyui.dev/r/scroll-text.json

segmented-button ui

npx shadcn@latest add https://www.jolyui.dev/r/segmented-button.json

typewritter-text ui

npx shadcn@latest add https://www.jolyui.dev/r/typewritter-text.json

velocity-morph ui

npx shadcn@latest add https://www.jolyui.dev/r/velocity-morph.json

number-counter ui

npx shadcn@latest add https://www.jolyui.dev/r/number-counter.json

highlight-text ui

npx shadcn@latest add https://www.jolyui.dev/r/highlight-text.json

command-palette ui

npx shadcn@latest add https://www.jolyui.dev/r/command-palette.json

github-star ui

npx shadcn@latest add https://www.jolyui.dev/r/github-star.json

gooey-text-morphing ui

npx shadcn@latest add https://www.jolyui.dev/r/gooey-text-morphing.json

feedback-widget ui

npx shadcn@latest add https://www.jolyui.dev/r/feedback-widget.json

image-sphere ui

npx shadcn@latest add https://www.jolyui.dev/r/image-sphere.json

infinite-ribbon ui

npx shadcn@latest add https://www.jolyui.dev/r/infinite-ribbon.json

hover-preview ui

npx shadcn@latest add https://www.jolyui.dev/r/hover-preview.json

ai-prompt-box ui

npx shadcn@latest add https://www.jolyui.dev/r/ai-prompt-box.json

date-wheel-picker ui

npx shadcn@latest add https://www.jolyui.dev/r/date-wheel-picker.json

liquid-metal-button ui

npx shadcn@latest add https://www.jolyui.dev/r/liquid-metal-button.json

morphing-cursor ui

npx shadcn@latest add https://www.jolyui.dev/r/morphing-cursor.json

falling-text ui

npx shadcn@latest add https://www.jolyui.dev/r/falling-text.json

shutter-text ui

npx shadcn@latest add https://www.jolyui.dev/r/shutter-text.json

utils lib

npx shadcn@latest add https://www.jolyui.dev/r/utils.json

use-mobile hook

npx shadcn@latest add https://www.jolyui.dev/r/use-mobile.json

theme-daylight theme

npx shadcn@latest add https://www.jolyui.dev/r/theme-daylight.json

theme-midnight theme

npx shadcn@latest add https://www.jolyui.dev/r/theme-midnight.json

theme-emerald theme

npx shadcn@latest add https://www.jolyui.dev/r/theme-emerald.json

animated-beam-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-beam-demo.json

animated-beam-curved-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-beam-curved-demo.json

animated-beam-multiple-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-beam-multiple-demo.json

animated-beam-bidirectional-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-beam-bidirectional-demo.json

animated-theme-toggle-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-theme-toggle-demo.json

animated-theme-toggle-sizes-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-theme-toggle-sizes-demo.json

animated-theme-toggle-navbar-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-theme-toggle-navbar-demo.json

dock-demo example

npx shadcn@latest add https://www.jolyui.dev/r/dock-demo.json

expanded-map-demo example

npx shadcn@latest add https://www.jolyui.dev/r/expanded-map-demo.json

expanded-map-locations-demo example

npx shadcn@latest add https://www.jolyui.dev/r/expanded-map-locations-demo.json

expanded-map-dark-demo example

npx shadcn@latest add https://www.jolyui.dev/r/expanded-map-dark-demo.json

expanded-map-zoom-demo example

npx shadcn@latest add https://www.jolyui.dev/r/expanded-map-zoom-demo.json

dock-macos-demo example

npx shadcn@latest add https://www.jolyui.dev/r/dock-macos-demo.json

dock-social-demo example

npx shadcn@latest add https://www.jolyui.dev/r/dock-social-demo.json

image-comparison-demo example

npx shadcn@latest add https://www.jolyui.dev/r/image-comparison-demo.json

image-comparison-hover-demo example

npx shadcn@latest add https://www.jolyui.dev/r/image-comparison-hover-demo.json

image-comparison-fade-demo example

npx shadcn@latest add https://www.jolyui.dev/r/image-comparison-fade-demo.json

image-comparison-split-demo example

npx shadcn@latest add https://www.jolyui.dev/r/image-comparison-split-demo.json

image-comparison-lens-demo example

npx shadcn@latest add https://www.jolyui.dev/r/image-comparison-lens-demo.json

image-comparison-vertical-demo example

npx shadcn@latest add https://www.jolyui.dev/r/image-comparison-vertical-demo.json

animated-tooltip-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-tooltip-demo.json

animated-tooltip-animation-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-tooltip-animation-demo.json

animated-tooltip-icon-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-tooltip-icon-demo.json

animated-tooltip-status-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-tooltip-status-demo.json

animated-tooltip-rich-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-tooltip-rich-demo.json

rainbow-button-demo example

npx shadcn@latest add https://www.jolyui.dev/r/rainbow-button-demo.json

animated-toast-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-toast-demo.json

animated-toast-minimal-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-toast-minimal-demo.json

animated-toast-undo-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-toast-undo-demo.json

animated-toast-notification-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-toast-notification-demo.json

animated-toast-stacked-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-toast-stacked-demo.json

animated-toast-promise-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-toast-promise-demo.json

animated-table-basic-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-table-basic-demo.json

animated-table-sort-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-table-sort-demo.json

animated-table-search-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-table-search-demo.json

animated-table-select-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-table-select-demo.json

animated-table-expand-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-table-expand-demo.json

animated-table-column-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-table-column-demo.json

animated-table-pagination-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-table-pagination-demo.json

animated-table-full-demo example

npx shadcn@latest add https://www.jolyui.dev/r/animated-table-full-demo.json

bento-grid-custom-demo example

npx shadcn@latest add https://www.jolyui.dev/r/bento-grid-custom-demo.json

bento-grid-portfolio-demo example

npx shadcn@latest add https://www.jolyui.dev/r/bento-grid-portfolio-demo.json

button-demo example

npx shadcn@latest add https://www.jolyui.dev/r/button-demo.json

button-variants-demo example

npx shadcn@latest add https://www.jolyui.dev/r/button-variants-demo.json

button-sizes-demo example

npx shadcn@latest add https://www.jolyui.dev/r/button-sizes-demo.json

button-icon-demo example

npx shadcn@latest add https://www.jolyui.dev/r/button-icon-demo.json

file-tree-basic-demo example

npx shadcn@latest add https://www.jolyui.dev/r/file-tree-basic-demo.json

file-tree-expandable-demo example

npx shadcn@latest add https://www.jolyui.dev/r/file-tree-expandable-demo.json

file-tree-full-expanded-demo example

npx shadcn@latest add https://www.jolyui.dev/r/file-tree-full-expanded-demo.json

file-tree-selectable-demo example

npx shadcn@latest add https://www.jolyui.dev/r/file-tree-selectable-demo.json

file-tree-custom-icons-demo example

npx shadcn@latest add https://www.jolyui.dev/r/file-tree-custom-icons-demo.json

github-contributors-demo example

npx shadcn@latest add https://www.jolyui.dev/r/github-contributors-demo.json

github-contributors-limit-demo example

npx shadcn@latest add https://www.jolyui.dev/r/github-contributors-limit-demo.json

phone-card-demo example

npx shadcn@latest add https://www.jolyui.dev/r/phone-card-demo.json

phone-card-image-demo example

npx shadcn@latest add https://www.jolyui.dev/r/phone-card-image-demo.json

rotate-text-demo example

npx shadcn@latest add https://www.jolyui.dev/r/rotate-text-demo.json

rotate-text-custom-demo example

npx shadcn@latest add https://www.jolyui.dev/r/rotate-text-custom-demo.json

vercel-tabs-demo example

npx shadcn@latest add https://www.jolyui.dev/r/vercel-tabs-demo.json

magnetic-demo example

npx shadcn@latest add https://www.jolyui.dev/r/magnetic-demo.json

magnetic-intensity-demo example

npx shadcn@latest add https://www.jolyui.dev/r/magnetic-intensity-demo.json

magnetic-range-demo example

npx shadcn@latest add https://www.jolyui.dev/r/magnetic-range-demo.json

magnetic-action-area-demo example

npx shadcn@latest add https://www.jolyui.dev/r/magnetic-action-area-demo.json

magnetic-cards-demo example

npx shadcn@latest add https://www.jolyui.dev/r/magnetic-cards-demo.json

video-player-demo example

npx shadcn@latest add https://www.jolyui.dev/r/video-player-demo.json

video-player-compact-demo example

npx shadcn@latest add https://www.jolyui.dev/r/video-player-compact-demo.json

video-player-playlist-demo example

npx shadcn@latest add https://www.jolyui.dev/r/video-player-playlist-demo.json

video-player-callbacks-demo example

npx shadcn@latest add https://www.jolyui.dev/r/video-player-callbacks-demo.json

video-player-quality-demo example

npx shadcn@latest add https://www.jolyui.dev/r/video-player-quality-demo.json

video-player-captions-demo example

npx shadcn@latest add https://www.jolyui.dev/r/video-player-captions-demo.json

video-player-timestamp-demo example

npx shadcn@latest add https://www.jolyui.dev/r/video-player-timestamp-demo.json

command-palette-demo example

npx shadcn@latest add https://www.jolyui.dev/r/command-palette-demo.json

command-palette-custom-demo example

npx shadcn@latest add https://www.jolyui.dev/r/command-palette-custom-demo.json

github-star-demo example

npx shadcn@latest add https://www.jolyui.dev/r/github-star-demo.json

calendar-basic-demo example

npx shadcn@latest add https://www.jolyui.dev/r/calendar-basic-demo.json

calendar-range-demo example

npx shadcn@latest add https://www.jolyui.dev/r/calendar-range-demo.json

calendar-multiple-demo example

npx shadcn@latest add https://www.jolyui.dev/r/calendar-multiple-demo.json

calendar-time-demo example

npx shadcn@latest add https://www.jolyui.dev/r/calendar-time-demo.json

calendar-presets-demo example

npx shadcn@latest add https://www.jolyui.dev/r/calendar-presets-demo.json

calendar-constraints-demo example

npx shadcn@latest add https://www.jolyui.dev/r/calendar-constraints-demo.json

calendar-full-demo example

npx shadcn@latest add https://www.jolyui.dev/r/calendar-full-demo.json

character-morph-demo example

npx shadcn@latest add https://www.jolyui.dev/r/character-morph-demo.json

character-morph-custom-demo example

npx shadcn@latest add https://www.jolyui.dev/r/character-morph-custom-demo.json

code-block-demo example

npx shadcn@latest add https://www.jolyui.dev/r/code-block-demo.json

code-block-variants-demo example

npx shadcn@latest add https://www.jolyui.dev/r/code-block-variants-demo.json

code-block-animations-demo example

npx shadcn@latest add https://www.jolyui.dev/r/code-block-animations-demo.json

code-block-compare-demo example

npx shadcn@latest add https://www.jolyui.dev/r/code-block-compare-demo.json

code-block-tabs-demo example

npx shadcn@latest add https://www.jolyui.dev/r/code-block-tabs-demo.json

code-block-terminal-demo example

npx shadcn@latest add https://www.jolyui.dev/r/code-block-terminal-demo.json

code-block-glass-demo example

npx shadcn@latest add https://www.jolyui.dev/r/code-block-glass-demo.json

text-morphing-demo example

npx shadcn@latest add https://www.jolyui.dev/r/text-morphing-demo.json

text-morphing-variants-demo example

npx shadcn@latest add https://www.jolyui.dev/r/text-morphing-variants-demo.json

glitch-text-demo example

npx shadcn@latest add https://www.jolyui.dev/r/glitch-text-demo.json

glitch-text-custom-demo example

npx shadcn@latest add https://www.jolyui.dev/r/glitch-text-custom-demo.json

scroll-text-demo example

npx shadcn@latest add https://www.jolyui.dev/r/scroll-text-demo.json

scroll-reveal-demo example

npx shadcn@latest add https://www.jolyui.dev/r/scroll-reveal-demo.json

horizontal-scroll-text-demo example

npx shadcn@latest add https://www.jolyui.dev/r/horizontal-scroll-text-demo.json

scroll-progress-text-demo example

npx shadcn@latest add https://www.jolyui.dev/r/scroll-progress-text-demo.json

sticky-scroll-text-demo example

npx shadcn@latest add https://www.jolyui.dev/r/sticky-scroll-text-demo.json

scroll-text-fade-up-demo example

npx shadcn@latest add https://www.jolyui.dev/r/scroll-text-fade-up-demo.json

scroll-text-blur-demo example

npx shadcn@latest add https://www.jolyui.dev/r/scroll-text-blur-demo.json

scroll-text-scale-demo example

npx shadcn@latest add https://www.jolyui.dev/r/scroll-text-scale-demo.json

scroll-text-rotate-demo example

npx shadcn@latest add https://www.jolyui.dev/r/scroll-text-rotate-demo.json

scroll-text-slide-left-demo example

npx shadcn@latest add https://www.jolyui.dev/r/scroll-text-slide-left-demo.json

segmented-button-demo example

npx shadcn@latest add https://www.jolyui.dev/r/segmented-button-demo.json

segmented-button-theme-demo example

npx shadcn@latest add https://www.jolyui.dev/r/segmented-button-theme-demo.json

segmented-button-logo-demo example

npx shadcn@latest add https://www.jolyui.dev/r/segmented-button-logo-demo.json

segmented-button-controlled-demo example

npx shadcn@latest add https://www.jolyui.dev/r/segmented-button-controlled-demo.json

segmented-button-custom-demo example

npx shadcn@latest add https://www.jolyui.dev/r/segmented-button-custom-demo.json

typewritter-text-demo example

npx shadcn@latest add https://www.jolyui.dev/r/typewritter-text-demo.json

typewritter-text-custom-demo example

npx shadcn@latest add https://www.jolyui.dev/r/typewritter-text-custom-demo.json

velocity-morph-demo example

npx shadcn@latest add https://www.jolyui.dev/r/velocity-morph-demo.json

velocity-morph-custom-demo example

npx shadcn@latest add https://www.jolyui.dev/r/velocity-morph-custom-demo.json

number-counter-demo example

npx shadcn@latest add https://www.jolyui.dev/r/number-counter-demo.json

rolling-counter-demo example

npx shadcn@latest add https://www.jolyui.dev/r/rolling-counter-demo.json

circular-counter-demo example

npx shadcn@latest add https://www.jolyui.dev/r/circular-counter-demo.json

stat-counter-demo example

npx shadcn@latest add https://www.jolyui.dev/r/stat-counter-demo.json

highlight-text-demo example

npx shadcn@latest add https://www.jolyui.dev/r/highlight-text-demo.json

highlight-text-variants-demo example

npx shadcn@latest add https://www.jolyui.dev/r/highlight-text-variants-demo.json

highlight-text-colors-demo example

npx shadcn@latest add https://www.jolyui.dev/r/highlight-text-colors-demo.json

gooey-text-morphing-demo example

npx shadcn@latest add https://www.jolyui.dev/r/gooey-text-morphing-demo.json

feedback-widget-demo example

npx shadcn@latest add https://www.jolyui.dev/r/feedback-widget-demo.json

feedback-widget-custom-label-demo example

npx shadcn@latest add https://www.jolyui.dev/r/feedback-widget-custom-label-demo.json

image-sphere-demo example

npx shadcn@latest add https://www.jolyui.dev/r/image-sphere-demo.json

image-sphere-autorotate-demo example

npx shadcn@latest add https://www.jolyui.dev/r/image-sphere-autorotate-demo.json

image-sphere-large-demo example

npx shadcn@latest add https://www.jolyui.dev/r/image-sphere-large-demo.json

image-sphere-custom-demo example

npx shadcn@latest add https://www.jolyui.dev/r/image-sphere-custom-demo.json

hover-preview-demo example

npx shadcn@latest add https://www.jolyui.dev/r/hover-preview-demo.json

hover-preview-portfolio-demo example

npx shadcn@latest add https://www.jolyui.dev/r/hover-preview-portfolio-demo.json

hover-preview-product-demo example

npx shadcn@latest add https://www.jolyui.dev/r/hover-preview-product-demo.json

hover-preview-custom-demo example

npx shadcn@latest add https://www.jolyui.dev/r/hover-preview-custom-demo.json

ai-prompt-box-demo example

npx shadcn@latest add https://www.jolyui.dev/r/ai-prompt-box-demo.json

ai-prompt-box-loading-demo example

npx shadcn@latest add https://www.jolyui.dev/r/ai-prompt-box-loading-demo.json

date-wheel-picker-demo example

npx shadcn@latest add https://www.jolyui.dev/r/date-wheel-picker-demo.json

date-wheel-picker-sizes-demo example

npx shadcn@latest add https://www.jolyui.dev/r/date-wheel-picker-sizes-demo.json

date-wheel-picker-locale-demo example

npx shadcn@latest add https://www.jolyui.dev/r/date-wheel-picker-locale-demo.json

liquid-metal-button-demo example

npx shadcn@latest add https://www.jolyui.dev/r/liquid-metal-button-demo.json

morphing-cursor-demo example

npx shadcn@latest add https://www.jolyui.dev/r/morphing-cursor-demo.json

morphing-cursor-custom-demo example

npx shadcn@latest add https://www.jolyui.dev/r/morphing-cursor-custom-demo.json

morphing-cursor-styled-demo example

npx shadcn@latest add https://www.jolyui.dev/r/morphing-cursor-styled-demo.json

falling-text-demo example

npx shadcn@latest add https://www.jolyui.dev/r/falling-text-demo.json

falling-text-scroll-demo example

npx shadcn@latest add https://www.jolyui.dev/r/falling-text-scroll-demo.json

falling-text-click-demo example

npx shadcn@latest add https://www.jolyui.dev/r/falling-text-click-demo.json

falling-text-custom-physics-demo example

npx shadcn@latest add https://www.jolyui.dev/r/falling-text-custom-physics-demo.json

shutter-text-demo example

npx shadcn@latest add https://www.jolyui.dev/r/shutter-text-demo.json

shutter-text-scroll-demo example

npx shadcn@latest add https://www.jolyui.dev/r/shutter-text-scroll-demo.json

shutter-text-click-demo example

npx shadcn@latest add https://www.jolyui.dev/r/shutter-text-click-demo.json

shutter-text-hover-demo example

npx shadcn@latest add https://www.jolyui.dev/r/shutter-text-hover-demo.json

infinite-ribbon-demo example

npx shadcn@latest add https://www.jolyui.dev/r/infinite-ribbon-demo.json

infinite-ribbon-custom-demo example

npx shadcn@latest add https://www.jolyui.dev/r/infinite-ribbon-custom-demo.json

infinite-ribbon-preview-demo example

npx shadcn@latest add https://www.jolyui.dev/r/infinite-ribbon-preview-demo.json