awesome-repositories.com

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

ExplorarBúsquedas curadasOpen-source alternativesSelf-hosted softwareBlogMapa del sitio
ProyectoAcerca deHow we rankPrensaServidor MCP
Aviso legalPrivacidadTérminos
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·
awesome-repositories.comBlog
Categorías

33 repositorios

Awesome GitHub RepositoriesUser Interaction Patterns

Guidelines and implementations for handling user-driven input in web interfaces.

Distinguishing note: Focuses on the behavioral aspects of interactive elements.

Explore 33 awesome GitHub repositories matching user interface & experience · User Interaction Patterns. Refine with filters or upvote what's useful.

Awesome User Interaction Patterns GitHub Repositories

Encuentra los mejores repositorios con IA.Buscaremos los repositorios que mejor coincidan usando IA.
  • streamlit/streamlitAvatar de streamlit

    streamlit/streamlit

    44,982Ver en GitHub↗

    Streamlit is a Python framework designed to transform data scripts into interactive web applications. It utilizes a reactive execution engine that automatically reruns scripts from top to bottom whenever a user interaction triggers a state change, ensuring the interface remains synchronized with the underlying data. By providing a declarative interface, it allows developers to build functional applications without requiring extensive knowledge of frontend web technologies. The framework distinguishes itself through an identity-based widget reconciliation system that persists user input across

    Provides a robust system for passing user information into backend code through interactive elements.

    Pythondata-analysisdata-sciencedata-visualization
    Ver en GitHub↗44,982
  • streamich/react-useAvatar de streamich

    streamich/react-use

    43,974Ver en GitHub↗

    react-use is a collection of reusable state and effect hooks for managing common logic in React applications. It serves as a comprehensive library for implementing state management patterns and wrapping various browser APIs into consistent hook interfaces. The project provides a specialized toolkit for DOM interaction and browser API integration, allowing components to track element dimensions, manage cookies, and monitor hardware sensors. It includes a suite of animation and timing utilities for physics-based numeric interpolation and frame-synced state updates. Beyond basic state managemen

    Implements behavioral patterns for detecting and tracking user inactivity over a specified duration.

    TypeScript
    Ver en GitHub↗43,974
  • reactivex/rxjsAvatar de ReactiveX

    ReactiveX/rxjs

    31,682Ver en GitHub↗

    RxJS is a library for reactive programming that provides a framework for composing asynchronous and event-based programs. It utilizes observable sequences to model data flows, allowing developers to manage complex sequences of events through a declarative programming interface. The library implements the observer pattern to facilitate decoupled communication between data producers and subscribers. By employing a lazy execution model, streams remain dormant until a consumer explicitly subscribes, at which point data production is triggered. This approach enables the construction of predictable

    Handles intricate user interface logic like debouncing inputs and synchronizing state with concurrent network requests.

    TypeScriptjavascriptrxjs
    Ver en GitHub↗31,682
  • allthingssmitty/css-protipsAvatar de AllThingsSmitty

    AllThingsSmitty/css-protips

    30,114Ver en GitHub↗

    This project is a curated knowledge base and technical reference for professional web styling. It serves as a comprehensive guide to modern CSS best practices, focusing on techniques that leverage native browser capabilities to create efficient, maintainable, and scalable stylesheets. The collection emphasizes the use of declarative style logic and modern layout engines to replace brittle, imperative approaches. By prioritizing native pseudo-class state management, logical property mapping, and relative unit scaling, the guide demonstrates how to build responsive interfaces that remain consis

    Implements patterns for managing focus states, pointer events, and conditional visibility in interactive web components.

    awesomeawesome-listcss
    Ver en GitHub↗30,114
  • marmelab/react-adminAvatar de marmelab

    marmelab/react-admin

    26,780Ver en GitHub↗

    React-admin is a framework for building data-driven administrative interfaces that connect to REST or GraphQL backends. It provides a comprehensive suite of tools for managing the full lifecycle of administrative applications, including resource-oriented routing, declarative form scaffolding, and context-driven state management. By utilizing a modular adapter-based architecture, the framework abstracts backend communication, allowing developers to build consistent CRUD interfaces that handle data fetching, authentication, and synchronization automatically. The project distinguishes itself thr

    Enhances interface responsiveness through immediate rendering and real-time filtering to ensure a fluid experience during complex tasks.

    TypeScriptadminadmin-dashboardadmin-on-rest
    Ver en GitHub↗26,780
  • vueuse/vueuseAvatar de vueuse

    vueuse/vueuse

    22,092Ver en GitHub↗

    This project is a comprehensive collection of modular, reactive functions designed to streamline the development of user interfaces. It serves as a toolkit for managing application state, wrapping native browser hardware and system features, and encapsulating common logic patterns into reusable units. By binding asynchronous data sources, browser events, and system properties to component state, it provides a unified framework for building interactive web and desktop applications. The library distinguishes itself through its focus on composition and lifecycle management, allowing developers t

    Captures real-time user input events to drive reactive interface updates based on movement and interaction.

    TypeScriptcomposableutility-libraryvue
    Ver en GitHub↗22,092
  • libretranslate/libretranslateAvatar de LibreTranslate

    LibreTranslate/LibreTranslate

    15,201Ver en GitHub↗

    LibreTranslate is an open-source, self-hosted machine translation engine that provides a private alternative to proprietary cloud-based translation services. It functions as a portable translation server, allowing users to process text and document translations locally or within their own infrastructure without relying on external providers. The platform distinguishes itself through its focus on privacy and flexible deployment, supporting anonymous network routing to bypass restrictive firewalls and protect user data. It is designed for integration into broader software ecosystems, offering a

    Provides toggles for optional features like database usage and user feedback.

    Pythonapimachinetranslate
    Ver en GitHub↗15,201
  • modelcontextprotocol/typescript-sdkAvatar de modelcontextprotocol

    modelcontextprotocol/typescript-sdk

    12,674Ver en GitHub↗

    This project provides a TypeScript software development kit for the Model Context Protocol, a standard designed to facilitate bidirectional communication between AI applications and external data sources or tools. It serves as a foundational framework for building both clients and servers, enabling language models to interact with external systems through a unified, decoupled interface. The SDK distinguishes itself by implementing a transport-agnostic connection layer that supports both local standard input-output streams and remote HTTP endpoints. It utilizes a JSON-RPC message bus to manage

    Directs users to a specific URL to perform out-of-band tasks like authorization, resuming operations once complete.

    TypeScript
    Ver en GitHub↗12,674
  • xmartlabs/eurekaAvatar de xmartlabs

    xmartlabs/Eureka

    11,820Ver en GitHub↗

    Eureka is a framework for building structured data-entry interfaces and forms in Swift for iOS applications. It provides a declarative UI layout engine and a dynamic input interface to define fields, sections, and row layouts through a configuration layer. The system distinguishes itself through dynamic interface management, including conditional visibility and interaction control that reacts to real-time user changes. It supports complex input behaviors such as expandable row rendering, multivalued field management for inserting or deleting similar rows, and custom keyboard navigation that s

    Enables or disables user interaction with specific rows based on conditional logic or static settings.

    Swift
    Ver en GitHub↗11,820
  • uidotdev/usehooksAvatar de uidotdev

    uidotdev/usehooks

    11,394Ver en GitHub↗

    This project is a comprehensive library of reusable React hooks designed to simplify browser API integration, state management, and component lifecycle tracking. It provides a declarative interface for managing complex browser interactions, allowing developers to encapsulate imperative logic into modular, composable functions that integrate directly with the component lifecycle. The library distinguishes itself by offering specialized utilities for asynchronous data orchestration, including built-in caching, retry logic, and loading state management. It also features advanced performance opti

    Tracks hover states, key presses, long-press gestures, and idle status to respond to user input.

    MDXastrobloghooks
    Ver en GitHub↗11,394
  • pmndrs/dreiAvatar de pmndrs

    pmndrs/drei

    9,705Ver en GitHub↗

    This project is a Three.js utility library and a collection of declarative React components designed for building 3D scenes. It provides a set of abstractions that wrap low-level primitives to manage lifecycles and memory disposal, serving as a geometry generator, a post-processing pipeline, and a scroll-driven animation tool. The library is distinguished by its specialized camera control systems, which include unified abstractions for orbit and perspective views as well as real-time face tracking and landmark detection via webcam feeds. It also features interactive transform gizmos for objec

    Provides a toggle to switch between automatic drag transforms and manual application.

    JavaScripthelpershooksreact
    Ver en GitHub↗9,705
  • gridstack/gridstack.jsAvatar de gridstack

    gridstack/gridstack.js

    8,972Ver en GitHub↗

    gridstack.js is a JavaScript grid layout library and responsive dashboard framework used to create interactive interfaces with draggable and resizable elements. It functions as a drag-and-drop layout manager and a JSON-serializable layout engine, allowing user-defined interface states to be persisted and restored. The library distinguishes itself through a touch-enabled grid interface and a responsive system that automatically adjusts item placement based on screen breakpoints. It features a collision-based layout engine that manages overlapping coordinates to shift or swap elements, alongsid

    Toggles the ability for users to drag, resize, or rotate widgets globally or for specific elements.

    TypeScriptangulardashboardgrid
    Ver en GitHub↗8,972
  • modelcontextprotocol/inspectorAvatar de modelcontextprotocol

    modelcontextprotocol/inspector

    8,721Ver en GitHub↗

    The inspector is a diagnostic and validation tool for the Model Context Protocol. It provides an interactive interface and a transport proxy to discover, inspect, and execute the tools, prompts, and resources provided by an MCP server. The project serves as a debugger and compliance tester to verify that server implementations adhere to the protocol specification and JSON-RPC standards. It allows for real-time monitoring of message exchanges and logs between clients and servers across various transport layers, such as standard input/output and Server-Sent Events. The tool covers a broad rang

    Guides users to external websites for secure interactions to ensure sensitive data remains off-client.

    TypeScript
    Ver en GitHub↗8,721
  • davemorrissey/subsampling-scale-image-viewAvatar de davemorrissey

    davemorrissey/subsampling-scale-image-view

    8,003Ver en GitHub↗

    This is a custom Android view designed for rendering high-resolution images using subsampling and tiling to prevent memory overflows. It serves as an interactive image component that supports pinch-to-zoom, panning, and double-tap animations. The project is distinguished by its rendering engine, which loads low-resolution previews and high-resolution tiles to enable the efficient navigation of massive image files. It includes a coordinate mapper that converts screen touch points into raw image pixel coordinates and vice versa during scaling and panning. The view provides a broad set of capab

    Offers configuration options to enable or disable user-driven panning and zooming gestures.

    Javaandroidandroid-libandroid-library
    Ver en GitHub↗8,003
  • glidejs/glideAvatar de glidejs

    glidejs/glide

    7,668Ver en GitHub↗

    Glide is a dependency-free ES6 JavaScript library used to create responsive content sliders and carousels. It functions as a modular framework for implementing sliding content areas that adapt their layout and settings based on browser window breakpoints. The library is distinguished by a modular architecture that allows the inclusion of only necessary logic to reduce final bundle size. It separates core structural styles from thematic visual styles and utilizes a plugin system to extend the base slider functionality and lifecycle hooks. The component covers a range of interaction and naviga

    Provides configuration options to enable or disable manual slide changes via controls or external commands.

    JavaScriptcarouseldependency-freees6
    Ver en GitHub↗7,668
  • gilbarbara/react-joyrideAvatar de gilbarbara

    gilbarbara/react-joyride

    7,588Ver en GitHub↗

    react-joyride is a user onboarding library for React applications used to create interactive guided tours and walkthroughs. It provides a framework for defining sequences of tooltips and beacons that highlight specific user interface elements to introduce users to application features. The library distinguishes itself through a programmatic controller that allows developers to manage tour state, navigation, and lifecycle events via external application logic. It supports a high degree of visual extensibility, allowing the replacement of default tooltips and beacons with custom components to m

    Defines how the tour responds to user inputs such as clicking the overlay or pressing the escape key.

    TypeScriptjoyridereactreact-component
    Ver en GitHub↗7,588
  • humhub/humhubAvatar de humhub

    humhub/humhub

    6,691Ver en GitHub↗

    HumHub is an open-source enterprise social networking framework designed to facilitate internal communication and team collaboration within private organizational networks. It provides a modular architecture that allows organizations to build secure, self-hosted digital workspaces where users can manage profiles, share content, and organize projects through dedicated collaborative spaces. The platform distinguishes itself through a highly extensible plugin system and a granular role-based access control model. By utilizing an event-driven hook system and a modular architecture, developers can

    Facilitates user interaction through social features like following peers and commenting on shared content.

    PHPawesomeenterprise-social-networkshumhub
    Ver en GitHub↗6,691
  • antvis/x6Avatar de antvis

    antvis/X6

    6,598Ver en GitHub↗

    X6 is a JavaScript diagramming library and SVG graph rendering engine used to build interactive flowcharts, mind maps, and visual workflow editors. It provides a framework for defining customizable node and edge behaviors, utilizing a hybrid rendering approach that combines SVG and HTML. The library decouples the visual graph representation from underlying business logic and data structures through a dedicated state management system. It allows for extensive extensibility via a registration mechanism for custom nodes, edges, and canvas tools. The toolkit includes capabilities for automatic g

    Implements common diagramming interaction patterns such as box-selection for bulk dragging and context-aware menus.

    TypeScriptantvdagdiagram
    Ver en GitHub↗6,598
  • communitytoolkit/windowscommunitytoolkitAvatar de CommunityToolkit

    CommunityToolkit/WindowsCommunityToolkit

    6,073Ver en GitHub↗

    The Windows Community Toolkit is a collection of reusable UI controls, helper functions, and app services designed to accelerate development for Universal Windows Platform (UWP) applications on Windows 10. It provides a library of XAML-based controls and components that handle common interaction patterns, enabling developers to build apps that run across PC, Mobile, Xbox, IoT, and HoloLens devices with consistent adaptive layouts. The toolkit is distributed as NuGet packages for straightforward integration into .NET projects, and it includes a companion sample app that demonstrates control be

    Provides reusable XAML controls that encapsulate common user interaction patterns for Windows 10 apps.

    C#csharpdotnetmvvm
    Ver en GitHub↗6,073
  • naver/billboard.jsAvatar de naver

    naver/billboard.js

    5,980Ver en GitHub↗

    billboard.js is a JavaScript charting library built on D3.js that renders interactive data visualizations from a single declarative configuration object. It supports a wide range of chart types including bar, line, pie, scatter, area, spline, step, candlestick, funnel, gauge, heatmap, radar, polar, treemap, bubble, donut, and sparkline charts, and can overlay multiple chart types within a single visualization. The library offers an opt-in Canvas rendering mode for improved performance with large datasets and high-density axis displays, alongside its standard SVG-based rendering. The library d

    Activates zooming, tooltips, and crosshair interactions on charts with simple boolean configuration flags.

    TypeScript
    Ver en GitHub↗5,980
Ant.12Siguiente
  1. Home
  2. User Interface & Experience
  3. User Interaction Patterns

Explorar subetiquetas

  • Clarifying Interaction PatternsPatterns for AI agents to request missing or clarifying information from users via structured questions. **Distinct from User Interaction Patterns:** Distinct from general User Interaction Patterns by focusing on agent-driven clarifying queries during task execution.
  • External User Interaction RequestsMechanisms for directing users to URLs for out-of-band tasks. **Distinct from User Interaction Patterns:** Distinct from User Interaction Patterns: focuses on the redirection workflow for authorization or manual tasks.
  • Interaction Toggles2 sub-etiquetasConfiguration options for enabling user-driven features and feedback mechanisms. **Distinct from User Interaction Patterns:** Distinct from user interaction patterns: focuses on feature-flagging user-facing interactions.