ActiveFeaturedAnimated componentspro available3,600
@ui-layouts
Animated components · MIT · data updated 2026-09-05
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.
3daestheticanimationbackgroundsblocksbuttonscardsdesign-systemformsglassmorphismhooksiconsloadersmapsmarketingmediamobilenavigationoverlayspaymentspro-availablesaastext-effects
Install
npx shadcn@latest add https://ui-layouts.com/r/registry.jsonHealth
StatusActive
Last commit1 week ago
LicenseMIT
Open issues7
ArchivedNo
Stars3,600
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, timeline-animation-default, scroll-animation, scroll-animation-default, scroll-animation-repeat, scroll-animation-text, mousetrail, image-mousetrail-default, image-mousetrail-small, image-mousetrail-disappear, image-mousetrail-without-component, horizontal-scroll, framerhorizontalscroll, stacking-card, css-image-stacking, css-card-stacking, smooth-scroll, sticky-gallery, sticky-hero-section, sparkles, sparkles-globe, sparkles-section, sparkles-title, sparkles-title2, sparkles-title3, sparkles-title4, sparkles-branding, marquee, default-marquee, verticle-marquee, logos-marquee, 3d-marquee, infintyband, liquid-glass, liquid-glass-weather, liquid-glass-mobile-icons, liquid-glass-notification, liquid-glass-sidebar-menu, blur-vignette, video-blur-vignette, blur-vignette-video, blur-vignette-img, blur-vignette-card, liquid-gradient, liquid-gradient-components, liquid-button, accordion, grid-layout-accordion, single-layout-accordion, multi-layout-accordion, faq-accordion, slider, dual-range-slider, position-range-slider, static-range-slider, showhide-pass, pass-strengthindicator, pass-strength-dotted-indicator, pass-strength-hover-indicator, pass-strength-inline-indicator, confirm-pass-check, tags-input, tags-input-components, tags-input-no-edit, phone-input-default, phone-input, datetime-input, datetime-input-default, time-picker, date-picker, multi-selector, multi-selector-default, file-upload, file-upload-default, chat-form-dropzone, imgpreview-dropzone, linear-modal, linear-modal-default, linear-modal-center-content, linear-modal-standalone, gallery-modal-accordion, gallery-modal-unsplash, gallery-modal-slider, dialog, dialog-default, media-modal, media-modal-default, imagemodals, responsive-modal, responsive-modal-default, directional-drawer, directional-drawer_default, left-directional-drawer, top-directional-drawer, bottom-directional-drawer, motion-drawer, motion-drawer-default, right-motion-drawer, spotlight, spotlight-card1, spotlight-card2, spotlight-card3, spotlight-card4, image-reveal, image-reveal2, bg-blocks-one, animated-beam, animated-beam-default, animated-beam-bidirectional, animated-beam-unidirectional, animated-beam-multiple-input, animated-beam-multiple-output, carousel, default-slider, align-slider, classname-slider, number-slider, scale-slider, thumbnail-slider, autostart-slider, autoscroll-slider, vertical-slider, vertical-thumbnail-slider, vertical-thumbnail-autostart-slider, framer-normal-carousel, framer-draggable-carousel, framer-autoplay-carousel, framer-multi-carousel, framer-thumnbails, framer-moveable-thumbnails, framer-drag-sliding-carousel, code-block, tree-code-viewer, code-tabs-mdx, hero-digital-success, hero-ai-value-proposition, hero-share-app, hero-social-app, hero-ai-ecommerce, hero-ai-infrastructure, hero-financial, feature-flow, feature-hero, feature-bento, feature-nature, feature-velocity, feature-highlights, feature-platform, feature-service, about-ecommerse, about-creative, about-me, about-sass, about-agency, about-architecture, about-mission, about-bento, about-business, about-whyus, about-vision, about-experience, team-clippath, team-classic, team-expert, team-magic, team-modern, team-social, team-synth, team-troops, team-vr, advanced-stats, stats-banner, stats-bento, stats-section, stats-details, stats-bold, stats-minimal, stack-testimonial, spotlight-testimonial, messenger-testimonial, chat-interface-testimonial, testimonial-basic, testimonial-carousel, marque-testimonial, impact-experience, portfolio-experience, creative-experience, work-experience, customer-experience, growth-plans, pricing-overview, pricing-grow-business, product-packs, startup-plans, subscription-details, faq-founder, faq-tabbed-explorer, faq-glass-card, faq-interactive-preview, faq-journey, faq-minimilastic, footer-hero, footer-bento, footer-bold, footer-detailed, footer-minimal, footer-privilege, footer-simple, btn-hover14, gradient-border, framer-carousel1, code-tabs, code-block-comp, code-tree-code-viewer, flipcountdown, special-offer, nested-vaul-drawer, unsplash-grid, sticky-hero-scroll, shimmer-loader, demo-spotlight-card2, demo-spotlight-card3, demo-spotlight-card4, spotlight-card-cruip, tools-tab, terminal-ui, type-writter, mac-geniePreview
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.jsonView source