UI Layouts

screenshot of UI Layouts
react
tailwind
shadcn-ui

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

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.
react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

shadcn-ui
Shadcn UI

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

ui-kit
UI Kits & Components

A UI kit provides developers with a set of reusable components that can be easily integrated into a website or application. These components are pre-designed with consistent styling and functionality, allowing developers to save time and effort in the design and development process. UI kits can be either custom-built or third-party, and often include components for buttons, forms, typography, icons, and more.

framer-motion
Framer Motion

Alpine.js is a lightweight JavaScript framework that simplifies the process of creating dynamic, reactive user interfaces on the web. It uses a declarative syntax that offers a higher level of abstraction compared to vanilla JavaScript, while being more performant and easier to use than jQuery.