awesome-repositories.com

Descoperă cele mai bune repository-uri open source cu căutare AI.

ExploreazăCăutări recomandateOpen-source alternativesSelf-hosted softwareBlogHartă site
ProiectDespreHow we rankPresăServer MCP
LegalConfidențialitateTermeni
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·
awesome-repositories.comBlog
Categorii

33 repository-uri

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

Găsește cele mai bune repo-uri cu AI.Vom căuta cele mai potrivite repository-uri folosind AI.
  • streamlit/streamlitAvatar streamlit

    streamlit/streamlit

    44,982Vezi pe 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
    Vezi pe GitHub↗44,982
  • streamich/react-useAvatar streamich

    streamich/react-use

    43,974Vezi pe 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
    Vezi pe GitHub↗43,974
  • reactivex/rxjsAvatar ReactiveX

    ReactiveX/rxjs

    31,682Vezi pe 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
    Vezi pe GitHub↗31,682
  • allthingssmitty/css-protipsAvatar AllThingsSmitty

    AllThingsSmitty/css-protips

    30,114Vezi pe 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
    Vezi pe GitHub↗30,114
  • marmelab/react-adminAvatar marmelab

    marmelab/react-admin

    26,780Vezi pe 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
    Vezi pe GitHub↗26,780
  • vueuse/vueuseAvatar vueuse

    vueuse/vueuse

    22,092Vezi pe 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
    Vezi pe GitHub↗22,092
  • libretranslate/libretranslateAvatar LibreTranslate

    LibreTranslate/LibreTranslate

    15,201Vezi pe 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
    Vezi pe GitHub↗15,201
  • modelcontextprotocol/typescript-sdkAvatar modelcontextprotocol

    modelcontextprotocol/typescript-sdk

    12,674Vezi pe 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
    Vezi pe GitHub↗12,674
  • xmartlabs/eurekaAvatar xmartlabs

    xmartlabs/Eureka

    11,820Vezi pe 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
    Vezi pe GitHub↗11,820
  • uidotdev/usehooksAvatar uidotdev

    uidotdev/usehooks

    11,394Vezi pe 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
    Vezi pe GitHub↗11,394
  • pmndrs/dreiAvatar pmndrs

    pmndrs/drei

    9,705Vezi pe 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
    Vezi pe GitHub↗9,705
  • gridstack/gridstack.jsAvatar gridstack

    gridstack/gridstack.js

    8,972Vezi pe 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
    Vezi pe GitHub↗8,972
  • modelcontextprotocol/inspectorAvatar modelcontextprotocol

    modelcontextprotocol/inspector

    8,721Vezi pe 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
    Vezi pe GitHub↗8,721
  • davemorrissey/subsampling-scale-image-viewAvatar davemorrissey

    davemorrissey/subsampling-scale-image-view

    8,003Vezi pe 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
    Vezi pe GitHub↗8,003
  • glidejs/glideAvatar glidejs

    glidejs/glide

    7,668Vezi pe 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
    Vezi pe GitHub↗7,668
  • gilbarbara/react-joyrideAvatar gilbarbara

    gilbarbara/react-joyride

    7,588Vezi pe 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
    Vezi pe GitHub↗7,588
  • humhub/humhubAvatar humhub

    humhub/humhub

    6,691Vezi pe 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
    Vezi pe GitHub↗6,691
  • antvis/x6Avatar antvis

    antvis/X6

    6,598Vezi pe 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
    Vezi pe GitHub↗6,598
  • communitytoolkit/windowscommunitytoolkitAvatar CommunityToolkit

    CommunityToolkit/WindowsCommunityToolkit

    6,073Vezi pe 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
    Vezi pe GitHub↗6,073
  • naver/billboard.jsAvatar naver

    naver/billboard.js

    5,980Vezi pe 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
    Vezi pe GitHub↗5,980
Înapoi12Înainte
  1. Home
  2. User Interface & Experience
  3. User Interaction Patterns

Explorează sub-etichetele

  • 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-tag-uriConfiguration 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.