@ui-layouts
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.
60 components react shadcn-cli MIT
Install this registry
shadcn (npm)
npx shadcn@latest add https://ui-layouts.com/r/registry.json pnpm
pnpm dlx shadcn@latest add https://ui-layouts.com/r/registry.json bun
bunx shadcn@latest add https://ui-layouts.com/r/registry.json fetch registry
curl -s https://ui-layouts.com/r/registry.json Components
60 total btn-bg-shine component
npx shadcn@latest add https://ui-layouts.com/r/btn-bg-shine.json btn-animated-gradient component
npx shadcn@latest add https://ui-layouts.com/r/btn-animated-gradient.json button-active component
npx shadcn@latest add https://ui-layouts.com/r/button-active.json button-hover-right component
npx shadcn@latest add https://ui-layouts.com/r/button-hover-right.json btn-creative-right component
npx shadcn@latest add https://ui-layouts.com/r/btn-creative-right.json btn-creative-top component
npx shadcn@latest add https://ui-layouts.com/r/btn-creative-top.json btn-click-down component
npx shadcn@latest add https://ui-layouts.com/r/btn-click-down.json btn-hover-down component
npx shadcn@latest add https://ui-layouts.com/r/btn-hover-down.json btn-hover-multiple component
npx shadcn@latest add https://ui-layouts.com/r/btn-hover-multiple.json btn-hover-underline component
npx shadcn@latest add https://ui-layouts.com/r/btn-hover-underline.json btn-hover-top-flip component
npx shadcn@latest add https://ui-layouts.com/r/btn-hover-top-flip.json btn-hover-left-flip component
npx shadcn@latest add https://ui-layouts.com/r/btn-hover-left-flip.json btn-hover-top-slowflip component
npx shadcn@latest add https://ui-layouts.com/r/btn-hover-top-slowflip.json btn-text-change component
npx shadcn@latest add https://ui-layouts.com/r/btn-text-change.json btn-cross-arrow component
npx shadcn@latest add https://ui-layouts.com/r/btn-cross-arrow.json btn-black-shadow component
npx shadcn@latest add https://ui-layouts.com/r/btn-black-shadow.json btn-hover-outline component
npx shadcn@latest add https://ui-layouts.com/r/btn-hover-outline.json btn-arrow-right component
npx shadcn@latest add https://ui-layouts.com/r/btn-arrow-right.json btn-rotating-gradient component
npx shadcn@latest add https://ui-layouts.com/r/btn-rotating-gradient.json color-picker component
npx shadcn@latest add https://ui-layouts.com/r/color-picker.json default-color-picker component
npx shadcn@latest add https://ui-layouts.com/r/default-color-picker.json raws-color-picker component
npx shadcn@latest add https://ui-layouts.com/r/raws-color-picker.json motion-number-upvotes component
npx shadcn@latest add https://ui-layouts.com/r/motion-number-upvotes.json motion-number-input component
npx shadcn@latest add https://ui-layouts.com/r/motion-number-input.json motion-number-slider component
npx shadcn@latest add https://ui-layouts.com/r/motion-number-slider.json number-flow-trading component
npx shadcn@latest add https://ui-layouts.com/r/number-flow-trading.json noise-effect component
npx shadcn@latest add https://ui-layouts.com/r/noise-effect.json scroll-text component
npx shadcn@latest add https://ui-layouts.com/r/scroll-text.json text-scroll-animation component
npx shadcn@latest add https://ui-layouts.com/r/text-scroll-animation.json scroll-text-marquee component
npx shadcn@latest add https://ui-layouts.com/r/scroll-text-marquee.json scroll-text-marquee-unidirectional component
npx shadcn@latest add https://ui-layouts.com/r/scroll-text-marquee-unidirectional.json scroll-text-marquee-bidirectional component
npx shadcn@latest add https://ui-layouts.com/r/scroll-text-marquee-bidirectional.json randomized-text-effect component
npx shadcn@latest add https://ui-layouts.com/r/randomized-text-effect.json randomized-text-unveil component
npx shadcn@latest add https://ui-layouts.com/r/randomized-text-unveil.json globe component
npx shadcn@latest add https://ui-layouts.com/r/globe.json card-globe component
npx shadcn@latest add https://ui-layouts.com/r/card-globe.json card-globe-white component
npx shadcn@latest add https://ui-layouts.com/r/card-globe-white.json img-ripple-effect component
npx shadcn@latest add https://ui-layouts.com/r/img-ripple-effect.json r3f-blob component
npx shadcn@latest add https://ui-layouts.com/r/r3f-blob.json mesh-shadergradient component
npx shadcn@latest add https://ui-layouts.com/r/mesh-shadergradient.json mesh-gradient-background3 component
npx shadcn@latest add https://ui-layouts.com/r/mesh-gradient-background3.json mesh-gradient-background2 component
npx shadcn@latest add https://ui-layouts.com/r/mesh-gradient-background2.json mesh-gradient-background component
npx shadcn@latest add https://ui-layouts.com/r/mesh-gradient-background.json animated-logo-footer component
npx shadcn@latest add https://ui-layouts.com/r/animated-logo-footer.json hover-footer component
npx shadcn@latest add https://ui-layouts.com/r/hover-footer.json responsive-header component
npx shadcn@latest add https://ui-layouts.com/r/responsive-header.json responsive-header-default component
npx shadcn@latest add https://ui-layouts.com/r/responsive-header-default.json boxgrid component
npx shadcn@latest add https://ui-layouts.com/r/boxgrid.json conditionGrid component
npx shadcn@latest add https://ui-layouts.com/r/conditionGrid.json normalGrid component
npx shadcn@latest add https://ui-layouts.com/r/normalGrid.json buyme-acoffee component
npx shadcn@latest add https://ui-layouts.com/r/buyme-acoffee.json stripecard component
npx shadcn@latest add https://ui-layouts.com/r/stripecard.json creative-hover-card component
npx shadcn@latest add https://ui-layouts.com/r/creative-hover-card.json stripecard2 component
npx shadcn@latest add https://ui-layouts.com/r/stripecard2.json hovercard1 component
npx shadcn@latest add https://ui-layouts.com/r/hovercard1.json hovercard2 component
npx shadcn@latest add https://ui-layouts.com/r/hovercard2.json hovercard3 component
npx shadcn@latest add https://ui-layouts.com/r/hovercard3.json hovercard4 component
npx shadcn@latest add https://ui-layouts.com/r/hovercard4.json productcard1 component
npx shadcn@latest add https://ui-layouts.com/r/productcard1.json productcard2 component
npx shadcn@latest add https://ui-layouts.com/r/productcard2.json