@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.

60 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

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

60 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