Registries
ActiveFeaturedAnimated components3,510

@ui-layouts

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

An open-source creative component library focused on advanced animations and visual effects for React/Next.js, built primarily with Framer Motion (motion) and Tailwind CSS. Components include R3F Blob (Three.js), Image Ripple Effect, Image Mousetrail, Image Reveal, Blur Vignette, Liquid Glass, Liquid Gradient, Mesh Gradients, Shimmer Loader, Motion Number, Drag Items, Horizontal Scroll, Globe, Marquee, Randomized Text Effect, Color Picker, Directional Drawer, Motion Drawer, Gallery Modal, and more — totalling 40+ unique effects. Also includes a Labs section for experiments. Free and open source. Use for: marketing sites, portfolios, and creative web apps that need striking motion effects and interactive visual components beyond standard Tailwind utility patterns.

WebsiteDocsGitHub

Install

npx shadcn@latest add https://ui-layouts.com/r/registry.json

Health

StatusActive
Last commit2 days ago
LicenseMIT
Open issues8
ArchivedNo
Stars3,510

Components (327)

btn-bg-shinebtn-animated-gradientbutton-activebutton-hover-rightbtn-creative-rightbtn-creative-topbtn-click-downbtn-hover-downbtn-hover-multiplebtn-hover-underlinebtn-hover-top-flipbtn-hover-left-flipbtn-hover-top-slowflipbtn-text-changebtn-cross-arrowbtn-black-shadowbtn-hover-outlinebtn-arrow-rightbtn-rotating-gradientcolor-pickerdefault-color-pickerraws-color-pickermotion-number-upvotesmotion-number-inputmotion-number-slidernumber-flow-tradingnoise-effectscroll-texttext-scroll-animationscroll-text-marqueescroll-text-marquee-unidirectionalscroll-text-marquee-bidirectionalrandomized-text-effectrandomized-text-unveilglobecard-globecard-globe-whiteimg-ripple-effectr3f-blobmesh-shadergradientmesh-gradient-background3mesh-gradient-background2mesh-gradient-backgroundanimated-logo-footerhover-footerresponsive-headerresponsive-header-defaultboxgridconditionGridnormalGridbuyme-acoffeestripecardcreative-hover-cardstripecard2hovercard1hovercard2hovercard3hovercard4productcard1productcard2
Components: btn-bg-shine, btn-animated-gradient, button-active, button-hover-right, btn-creative-right, btn-creative-top, btn-click-down, btn-hover-down, btn-hover-multiple, btn-hover-underline, btn-hover-top-flip, btn-hover-left-flip, btn-hover-top-slowflip, btn-text-change, btn-cross-arrow, btn-black-shadow, btn-hover-outline, btn-arrow-right, btn-rotating-gradient, color-picker, default-color-picker, raws-color-picker, motion-number-upvotes, motion-number-input, motion-number-slider, number-flow-trading, noise-effect, scroll-text, text-scroll-animation, scroll-text-marquee, scroll-text-marquee-unidirectional, scroll-text-marquee-bidirectional, randomized-text-effect, randomized-text-unveil, globe, card-globe, card-globe-white, img-ripple-effect, r3f-blob, mesh-shadergradient, mesh-gradient-background3, mesh-gradient-background2, mesh-gradient-background, animated-logo-footer, hover-footer, responsive-header, responsive-header-default, boxgrid, conditionGrid, normalGrid, buyme-acoffee, stripecard, creative-hover-card, stripecard2, hovercard1, hovercard2, hovercard3, hovercard4, productcard1, productcard2, productcard3, productcard4, productcard5, productcard6, creative-clippath, corporate-clippath, symbolic-clippath, creative-mask-clippath, watersplash-clippath, creative-imagemasking, animal-imagemasking, watersplash-imagemasking, center-imagemasking, fixedbg-imagemasking, creative-videomasking, splashwater-videomasking, textoverlay-videomasking, hexagon-videomasking, hexagon2-videomasking, progressive-carousel, horizontal-progressive-carousel, vertical-progressive-carousel, image-hover-accordion, tailwind-image-accordion, image-tab1, image-tab2, img-tabs-standalone, magnified-doc, magnified-tab, tabs, animated-tabs, creative-tab, register-tab, swapy, default-swapy, opacity-swapy, swapy-handle, swapy-without-components, drag-items, timeline-animation

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.

@ui-layouts · btn-bg-shine

npx shadcn@latest add https://ui-layouts.com/r/btn-bg-shine.json
View source