awesome-repositories.com
Blog
awesome-repositories.com

Descubre los mejores repositorios open-source con nuestra búsqueda potenciada por IA.

ExplorarBúsquedas curadasAlternativas open-sourceSoftware autohospedableBlogMapa del sitio
ProyectoAcerca deCómo clasificamosPrensaServidor MCP
Aviso legalPrivacidadTérminos
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·
ui-layouts avatar

ui-layouts/uilayouts

0
View on GitHub↗
3,190 estrellas·175 forks·TypeScript·mit·2 vistaswww.ui-layouts.com↗

Uilayouts

uillayouts is a comprehensive design system consisting of interactive components, responsive templates, motion-enhanced UI kits, and advanced visual effect toolkits. It provides a collection of accessible React UI components and pre-designed layout sections for landing pages.

The project is distinguished by a specialized visual effects library and motion-driven components. It features high-performance graphical enhancements such as glassmorphism, mesh gradients, noise overlays, and SVG masking, alongside interactive elements that utilize physics-based animations and cursor-tracking effects.

The library covers a broad surface of interface needs, including adaptive navigation systems, animated form elements, and data display tools like bento grids. It also includes structural templates for hero sections, portfolios, and pricing tables, as well as complex motion primitives for scroll-triggered reveals and dynamic text transitions.

Features

  • UI Component Libraries - Provides a comprehensive design system of motion-enhanced UI components, templates, and visual effect toolkits.
  • Animated UI Components - Provides a comprehensive library of animated UI components featuring smooth transitions and scroll-triggered reveals.
  • UI Visual Effects Toolkits - Provides a toolkit for advanced UI effects including glassmorphism, mesh gradients, and noise overlays.
  • Accessible Component Libraries - Ships a library of accessible interface elements optimized for compliance and easy copy-and-paste integration.

Búsqueda con IA

Explora más repositorios increíbles

Describe lo que necesitas en lenguaje sencillo: la IA clasifica miles de proyectos open-source curados por relevancia.

Start searching with AI
  • Buttons - Provides a collection of customizable buttons with built-in animations and interactive hover states.
  • React Components - Offers a collection of accessible, customizable React interface elements available for copy-and-paste integration.
  • Scroll-Triggered Animations - Executes visual transitions and staggering effects when elements intersect the viewport during scrolling.
  • Physics-Based Interactions - Implements physics-based interactions like friction and mass for organic draggable elements and cursor tracking.
  • Glassmorphism Styling - Provides high-performance glassmorphism elements featuring frosted glass aesthetics, backdrop blur, and transparency.
  • Navigation Headers - Implements a navigation header that adapts its layout between desktop dialogs and mobile drawers.
  • Mesh Gradients - Generates fluid, multi-color animated mesh gradients for high-performance background visuals.
  • Responsive Grid Systems - Implements a flexible grid system that adapts UI components across different screen sizes.
  • Scroll Animations - Triggers directional transitions and fade-in effects as content enters the browser viewport.
  • Tabbed Interfaces - Renders a tabbed interface featuring a sliding background indicator for active states.
  • Interactive Web Component Libraries - Ships a set of motion-enhanced interactive components including carousels, sliders, and physics-based draggable interfaces.
  • Collapsible Navigation Sidebars - Implements navigation panels with collapsible states that adapt between mobile drawers and desktop sidebars.
  • Chip Input Fields - Provides an input field that transforms text into removable chips using keyboard shortcuts.
  • Product Display Cards - Provides configurable layouts for displaying product images, pricing, and descriptions.
  • Bento Grid Metrics - Implements numerical statistics and data highlights rendered through high-impact banners and bento grids.
  • Image Displacement Effects - Renders images with water-like ripple animations using a high-performance graphics engine.
  • Typography Particle Effects - Adds dynamic sparkling particle effects to headings with configurable density and speed.
  • Coordinate-Based Lighting - Implements radial gradient lighting that tracks mouse coordinates to create interactive spotlight effects.
  • Interactive 3D Globes - Provides an interactive 3D animated globe with customizable rotations for geographic visualizations.
  • Cursor-Tracking Image Effects - Implements image mousetrails where visual elements track the user's cursor movement with smooth animations.
  • UI Sparkle Particles - Provides glowing particle effects to highlight specific interface sections for visual emphasis.
  • SVG and CSS Masking - Renders images and videos within custom non-rectangular shapes using SVG paths and CSS clip-paths.
  • Character Cycle Transitions - Provides futuristic text animations that cycle through random characters before revealing the final string.
  • Visual State Transitions - Manages visual transitions between different UI states, such as expanding cards and collapsing drawers.
  • Blur Effects - Implements soft-edge blur overlays and Gaussian filters to achieve a modern glassmorphism aesthetic.
  • Image Masking - Applies custom SVG and CSS clip-paths to images to create non-rectangular geometric presentations.
  • Physics-Based Animations - Implements draggable interface elements that move freely using physics-based motion models.
  • Staggered Reveal Sequences - Animates sequential content sections using staggering effects as they enter the viewport.
  • Particle - Provides high-performance particle systems for creating glowing visual depth and atmospheric noise overlays.
  • Interactive Grid Backgrounds - Creates responsive grids of blocks with customizable active states and hover animations as background elements.
  • CSS Filter Effects - Utilizes CSS backdrop filtering to create glassmorphism effects with blur and transparency.
  • Responsive Layout Transitions - Provides a collapsible navigation drawer that smoothly transitions between mobile and desktop views.
  • Video Surface Visual Effects - Applies SVG shapes and cutouts to video elements using CSS masking for specialized surface effects.
  • Gradient Borders - Provides customizable gradient borders for containers and text to enhance visual depth.
  • Stacked Transitions - Implements a visual effect where overlapping cards animate and layer during transitions.
  • Carousel Transition Effects - Implements a sliding item carousel with dynamic transitions for navigation.
  • Animated FAQ Lists - Provides an interactive FAQ section with smooth expanding and collapsing animations.
  • Color Pickers - Provides an interactive color picker interface supporting RGB, HSV, and hex values with a hue slider.
  • Content Carousels - Provides interactive components that cycle through a series of content elements with smooth transitions.
  • Date and Time Pickers - Implements a calendar interface and input field for selecting specific dates and times.
  • Expanding Content Cells - Ships content cards that trigger smooth animations to expand and reveal detailed images and text.
  • FAQ Layouts - Provides question-and-answer layouts using tabbed explorers, glass cards, and minimalistic lists.
  • Drag-and-Drop File Upload - Provides a drag-and-drop file upload interface featuring progress indicators and real-time media previews.
  • Footers - Offers pre-designed website footer templates ranging from minimal lists to bento grids.
  • Hero Sections - Provides visually striking landing page hero section templates with diverse layout styles.
  • Horizontal Navigation Sliders - Implements a scrollable list with an animating background indicator that slides between tabs.
  • Accordion Image Galleries - Provides an interactive image accordion gallery that expands elements to reveal associated content.
  • Hover Card Displays - Implements floating cards that appear on mouseover with custom animations and visual effects.
  • Animated Gallery Modals - Displays collections of images that open in an animated modal window.
  • Animated Image Tabs - A feature for the product to switch between image galleries and associated text content using smooth transitions.
  • Cursor-Driven Image Reveals - Displays images that follow and reveal themselves based on the cursor position when hovering.
  • Animated Identity Marks - Provides stylized identity marks and logos using motion effects to enhance brand recognition.
  • Landing Page Templates - Provides responsive layout templates for landing pages, including hero headers and bento grids.
  • Product Showcases - Implements layouts for highlighting product capabilities using bento grids and flow displays.
  • Masonry Layouts - Provides a dynamic grid layout that automatically fills vertical gaps for items of variable heights.
  • Responsive Modals - Implements modal components that adapt their layout between mobile app drawers and desktop sliding panels.
  • Modal Overlays - Provides modal overlays with smooth transitions and interactive effects for focused user interaction.
  • Media Lightboxes - Ships animated overlays specifically designed to display images and videos with responsive scaling.
  • Password Input Fields - Ships secure password input fields with visibility toggles and real-time strength validation.
  • Phone Number Inputs - Implements phone number input fields with integrated country code selection and automatic formatting.
  • Pricing Table Layouts - Offers pre-designed layout templates for showcasing subscription plans and product packs.
  • Spotlight Effect Cards - Renders cards with radial gradient lighting effects that follow the mouse cursor.
  • Range Sliders - Ships animated range sliders for selecting single or multiple numeric values with smooth transitions.
  • Scrolling Text Banners - Renders a continuous looping marquee for text, images, and videos with adjustable speeds.
  • Scroll-Responsive Marquees - Implements horizontal text marquees that adjust their movement speed based on user scroll position.
  • Tagging Selectors - Provides an interface to search, tag, and select multiple options from a list.
  • Sticky Elements - Provides components that remain fixed within a container while the rest of the page scrolls.
  • Magnified Navigation Docks - Creates an interactive navigation dock that expands items on hover using magnification.
  • Team Showcase Sections - Displays curated lists of team members using grid layouts and custom clip paths.
  • Testimonial Layouts - Displays customer reviews through a variety of carousels, grids, and marquees.
  • Texture Overlays - Ships an adjustable textured grain layer to add visual depth and atmosphere to the user interface.
  • Organic 3D Shapes - Displays smooth, organic 3D animated blobs that evolve in real-time for background visual depth.

    • Historial de estrellas

    Gráfico del historial de estrellas de ui-layouts/uilayoutsGráfico del historial de estrellas de ui-layouts/uilayouts

    Preguntas frecuentes

    ¿Qué hace ui-layouts/uilayouts?

    uillayouts is a comprehensive design system consisting of interactive components, responsive templates, motion-enhanced UI kits, and advanced visual effect toolkits. It provides a collection of accessible React UI components and pre-designed layout sections for landing pages.

    ¿Cuáles son las características principales de ui-layouts/uilayouts?

    Las características principales de ui-layouts/uilayouts son: UI Component Libraries, Animated UI Components, UI Visual Effects Toolkits, Accessible Component Libraries, Buttons, React Components, Scroll-Triggered Animations, Physics-Based Interactions.

    ¿Qué alternativas de código abierto existen para ui-layouts/uilayouts?

    Las alternativas de código abierto para ui-layouts/uilayouts incluyen: uikit/uikit — UIkit is a CSS front-end framework and accessible UI component library designed for building responsive web… chakra-ui/ark — Ark is a headless UI component library that delivers accessible, cross-framework primitives with behavior governed by… cosscom/coss — Coss is an accessible UI component library and design system framework used to build web interfaces. It provides a… hunvreus/basecoat — Basecoat is a zero-runtime UI library and themable interface framework consisting of a set of accessible web… saadeghi/daisyui — This project is a utility-first component library that provides a comprehensive suite of pre-styled, reusable… layui/layer — This project is a JavaScript UI component library and frontend utility toolkit. It serves as a web modal framework and…

    Alternativas open-source a Uilayouts

    Proyectos open-source similares, clasificados según cuántas características comparten con Uilayouts.
    • uikit/uikitAvatar de uikit

      uikit/uikit

      18,534Ver en GitHub↗

      UIkit is a CSS front-end framework and accessible UI component library designed for building responsive web interfaces. It provides a comprehensive set of styling classes and modular components alongside a JavaScript interaction toolkit for managing behavioral elements. The framework includes native support for internationalized web interfaces, featuring multi-locale text translation and right-to-left layout directions. It employs a responsive layout engine that uses flexible grids, adaptive breakpoints, and container widths to align content across different screen sizes. The toolkit covers

      HTML
      Ver en GitHub↗18,534
    • chakra-ui/arkAvatar de chakra-ui

      chakra-ui/ark

      5,004Ver en GitHub↗

      Ark is a headless UI component library that delivers accessible, cross-framework primitives with behavior governed by finite state machines. It provides unstyled components that encapsulate logic and accessibility — including full keyboard navigation, focus management, and WAI-ARIA support — while leaving visual styling entirely to the consumer. Components expose scoped data attributes for CSS targeting and use state machines to produce predictable, testable interactive behavior across every state transition. The library distinguishes itself through a state propagation model that distributes

      TypeScriptcomponentsdesign-systemheadless
      Ver en GitHub↗5,004
    • cosscom/cossAvatar de cosscom

      cosscom/coss

      10,125Ver en GitHub↗

      Coss is an accessible UI component library and design system framework used to build web interfaces. It provides a comprehensive kit of interactive elements and layout building blocks that follow screen reader and keyboard navigation standards. The project functions as a UI overlay management library, offering specialized tools for implementing anchored popovers, tooltips, and slide-out panels with smooth transitions. It includes a set of accessible form primitives and selection controls to ensure compatibility across different assistive technologies. Its broader capabilities cover the const

      TypeScriptnextjsradix-uireact
      Ver en GitHub↗10,125
  • hunvreus/basecoatAvatar de hunvreus

    hunvreus/basecoat

    3,653Ver en GitHub↗

    Basecoat is a zero-runtime UI library and themable interface framework consisting of a set of accessible web components. It provides a collection of pre-styled interface elements and utility classes designed to function as static assets without requiring a dedicated JavaScript framework runtime. The project features a dedicated UI component scaffolder, providing a command line interface to automate the generation of project folder structures and the installation of component templates. Visual styles are managed through a system of CSS variables and utility classes, allowing for global theme a

    JavaScriptalpinecomponentscomponents-library
    Ver en GitHub↗3,653
    • Ver las 30 alternativas a Uilayouts→