UI Layouts screenshot

UI Layouts

Author Avatar Theme by Ui layouts
Updated: 14 May 2025
1741 Stars

100+ Free beautifull interactive react/nextjs component based on tailwindcss, framer-motion, gsap etc

Categories

Overview:

UI LAYOUT is an open-source component library designed to simplify website development for developers and designers. This library focuses on creative designs and aims to provide components that are essential for websites. The creator, Naymur, is committed to continuously adding new components to support users.

Features:

  • Image Ripple Effect: Add an interactive ripple effect to images.
  • Buy Me Coffee: Incorporate a “Buy Me Coffee” feature.
  • Youtube Tags: Easily add YouTube tag functionality.
  • File Upload: Streamline the process of uploading files.
  • Password: Implement password fields securely.
  • Range Slider: Use customizable range sliders.
  • Motion Number: Integrate animated numbers.
  • Embla Carousel: Create responsive carousels.
  • Sparkles: Add sparkling effects to elements.
  • Drag Items: Enable drag and drop functionality.
  • Timeline Animation: Display content using interactive timelines.
  • Clip Path Image: Utilize clip path effects on images.
  • Buttons: Access a variety of styled buttons.
  • Image Mousetrail: Implement mouse trail effects on images.
  • Image Reveal: Create engaging image reveal animations.

Installation:

To install UI LAYOUT, follow these steps:

  1. Install tailwindcss and framer-motion.
  2. Add the following code snippet to your utils.ts file:
// Add this hook for media queries
useMediaQueries();

Summary:

UI LAYOUT is an open-source component library curated by Naymur, providing developers and designers with a collection of creative and essential components for website development. By following the installation guide and exploring the various features offered, users can enhance their websites with interactive and visually appealing elements.