Open-source alternatives to React Sortable Hoc

Blueprint is a React UI component library and web design system focused on accessibility and the creation of data-dense interfaces. It provides a standardized framework of visual styles and reusable interface elements for building professional desktop applications. The toolkit is specifically optimized for displaying complex information and large datasets, featuring high-performance interactive data grids for rendering and manipulating data. The library covers a broad range of capability areas, including the construction of form inputs, navigation systems, and content layout management. It a

This project is a declarative drag-and-drop library designed for building accessible and fluid interface interactions within web applications. It provides a component-based interface for managing complex list reordering and spatial relationships between elements, utilizing a specialized state container to coordinate movement logic. The library distinguishes itself through a focus on accessibility, maintaining a live connection between visual drag states and the browser accessibility tree to support screen readers and keyboard navigation. It optimizes performance by bypassing standard componen

This project is a community-maintained open source directory that serves as a comprehensive index of React components and libraries. It functions as a technical knowledge base, mapping common development challenges to vetted third-party solutions to help developers accelerate their frontend workflows and avoid reinventing standard interface elements. The directory distinguishes itself through a decentralized, hyperlink-centric architecture that avoids hosting code locally, instead pointing users directly to external repositories. This content is curated through a collaborative model where com

Sortable is a framework-agnostic JavaScript library for creating reorderable lists through drag and drop interactions. It functions as a reorderable list manager that allows users to rearrange DOM elements using pointer interactions on modern browsers and touch devices. The library enables the transfer or cloning of items between different lists using shared group identifiers. It supports complex organizational structures, including nested reorderable lists for managing hierarchical data across different levels. Its capabilities cover the animation of element movements and the configuration

Sortable is a JavaScript drag and drop library used to create reorderable lists of HTML elements. It is a framework-agnostic tool and a touch-enabled interaction library that functions across modern browsers and touch devices without dependencies on specific web frameworks. The library enables the movement and cloning of elements between different containers using shared group configurations. It supports the repositioning of multiple items simultaneously and the use of specific drag handles to restrict which areas of an element trigger a move. Additional capabilities include programmatic sor

React Magic Motion is a component-based library for React that automates layout transitions and visual movement. It functions as a declarative animation framework, allowing developers to apply smooth motion to UI elements without the need for manual keyframe management or complex state tracking. The library utilizes a layout-based animation technique that calculates the difference between element positions before and after state changes. By monitoring the component tree and DOM layout, it automatically triggers hardware-accelerated CSS transforms to animate shifts, reordering, and navigation

Draggable is a JavaScript library for implementing draggable elements and sortable lists within a web browser. It provides a functional toolset for creating accessible drag and drop interfaces and a mechanism for dynamically swapping, sorting, and reordering HTML elements in real time. The library features a cross-input interaction layer that unifies mouse, touch, and force-touch events into a single stream for consistent behavior across different devices. It specifically includes tools for providing screen reader feedback and assistive technology support to ensure drag operations are accessi

Dragula is a JavaScript drag and drop library and DOM element manipulator used to move and reorder HTML elements between multiple containers. It functions as a UI interaction framework and event manager that tracks drag lifecycles to facilitate the movement of elements within a web browser interface. The library distinguishes itself through configurable constraint validation, allowing developers to define which elements are draggable and which containers are permitted drop targets. It supports specialized interaction patterns such as element cloning, the use of specific drag handles to restri

React DnD is a library for building complex drag-and-drop interfaces within React applications. It provides a declarative, component-based architecture that abstracts native browser drag-and-drop APIs, allowing developers to manage state and interactions between draggable sources and drop targets. The library utilizes a dependency injection backend to decouple interaction logic from specific input methods, supporting mouse, touch, and native browser events through a unified normalization layer. It employs a registry pattern to track active drop zones and a monitor pattern to observe the lifec

Vue.Draggable is a component-based library for Vue.js that enables drag-and-drop functionality within web interfaces. It functions as a wrapper for the SortableJS engine, bridging the gap between imperative DOM manipulation and the declarative nature of the Vue.js reactive system. By synchronizing user interface interactions with the underlying data model, it ensures that list reordering and element movement are automatically reflected in the application state. The library supports complex interaction patterns, including the ability to move items between lists, clone elements using keyboard m

React Bootstrap is a frontend component framework and responsive UI kit that translates the Bootstrap CSS framework into a React-based component architecture. It provides a collection of reusable, pre-styled interface elements and grid systems designed for consistent, responsive web development. The library distinguishes itself by wrapping raw HTML markup in React components to manage accessibility and stateful behaviors. It utilizes a centralized theme provider to propagate global configuration and breakpoints, while employing portal-based rendering for overlays to prevent clipping issues.

This project is a drag-and-drop UI library and a Vue 3 component for implementing sortable lists and state-synced interfaces. It acts as a wrapper for the Sortable.js library, providing a state-synced list component that automatically updates the underlying data array when items are reordered or moved. The library supports nested draggable interfaces and hierarchical data organization, allowing draggable containers to be nested inside other movable items to create multi-level structures. It also enables multi-column data transfer, allowing elements to be moved or cloned between different drag

Vaul is a React drawer component used to create accessible, draggable bottom sheets and slide-up panels. It serves as a mobile-friendly alternative to traditional dialogs and modals by rendering content into a separate DOM node via a portal to avoid layout nesting issues. The library features configurable snap points that allow panels to lock into specific vertical heights during drag gestures. It supports hierarchical UI layering, enabling the use of nested drawers for complex navigation or multi-level menus. The component includes an accessibility layer with ARIA announcements and focus ma

Puck is a visual page editor and layout tool for React. It functions as a CMS page builder and component orchestrator, allowing for the design and arrangement of structured content pages through a drag-and-drop interface. The system utilizes a pluggable component registry to integrate external React components into the visual canvas. It employs schema-driven mapping and JSON-based serialization to store and persist page structures as portable data objects. The platform covers the domain of no-code page building and CMS content management, providing a visual reconciliation system to synchroni

Semantic UI React is a declarative component library that provides native React bindings for the Semantic UI design language. It enables the construction of complex user interfaces through a modular, component-based architecture that maps directly to established design patterns, allowing developers to build consistent web application layouts without manual HTML markup. The library distinguishes itself through a shorthand property system that automatically generates and populates nested child components from data objects, significantly reducing the need for verbose code. It also supports polym

gluestack-ui is a cross-platform React component library built with Tailwind CSS. It provides over 30 pre-built, accessible components that can be installed by copying their source files directly into a project, giving developers full control over customization without external runtime dependencies. Every component implements WAI-ARIA patterns, keyboard navigation, and screen reader support out of the box. A key differentiator is the copy-paste architecture: rather than a traditional package dependency, component source code is placed in the project, allowing direct editing and eliminating ve

This repository serves as a comprehensive educational resource and study guide for front-end developers preparing for technical interviews. It provides a structured collection of questions, answers, and reference materials focused on the core concepts and architectural patterns of the React library. The content covers the fundamental principles of component-based user interface design, including lifecycle management, state synchronization, and data flow patterns. It details how to implement predictable state management through centralized stores and action dispatching, as well as how to utili

Muuri is a JavaScript grid layout library and draggable UI framework used to create responsive grids with drag-and-drop reordering, sorting, and animated filtering. It features a nested grid system that allows full grid instances to be embedded inside other grid items to create hierarchical structures. The library uses a web worker layout engine to offload heavy coordinate calculations to background threads, maintaining interface responsiveness during complex rearrangements. The system provides interactive capabilities for moving items between multiple containers, filtering visibility based

This library provides a centralized system for managing and rendering transient alert messages within React applications. It functions as a frontend notification manager, using a provider-based architecture to track, update, and remove status alerts through a standardized reactive interface. The system distinguishes itself by allowing developers to replace default alert designs with custom components, ensuring that feedback elements align with specific application branding and design systems. It utilizes portal-based rendering to mount notifications outside the main component hierarchy, ensur

react-slick is a React carousel component and responsive slider library. It provides a reusable user interface element for displaying a sequence of items in a horizontal scroll, supporting infinite looping, navigation dots, and adjustable transition speeds. The library enables the creation of touch-enabled image and content sliders that adapt to different screen sizes. It is used to build interactive content carousels, responsive image sliders, and rotating banners for product showcases.

Tremor is a React component library designed for building analytical dashboards and data-driven web interfaces. It provides a collection of modular UI elements and pre-styled charts that allow developers to render complex datasets into clear visual summaries. The library functions as a utility-first UI kit that integrates with styling frameworks to ensure consistent design across dashboard layouts. By utilizing a declarative composition model, it enables the assembly of interfaces through reusable layout containers and property-driven visual configuration, decoupling raw data processing from

This project is a declarative motion framework and JavaScript animation engine designed to transition CSS properties, SVG attributes, and DOM elements. It provides a comprehensive set of tools for creating complex, multi-part motion sequences by synchronizing animations, timers, and callbacks into a single, unified timeline. The library distinguishes itself through a robust timeline-based sequence orchestrator that allows for precise timing, label-based control, and hierarchical nesting of animations. It also features a physics-driven interaction library that enables draggable elements with c

Sonner is a React-based notification library designed for rendering transient, stackable feedback messages within web applications. It functions as a frontend system for managing and displaying time-limited alerts that inform users of system events or state changes during an active session. The library utilizes a centralized state machine to manage the lifecycle of each notification, ensuring consistent visibility and removal. It coordinates these elements through an event-driven message bus and renders them into a detached container outside the main application hierarchy to maintain global s

This project is a jQuery plugin designed for creating responsive grid interfaces that support interactive drag-and-drop reordering and manual resizing of elements. It provides a framework for managing structured layouts where content can be organized into a grid system that automatically adjusts to maintain visual alignment. The library enables users to customize dashboards by rearranging and scaling widgets through mouse-based interactions. It utilizes a coordinate-based system to detect collisions and ensure that elements snap into valid slots, while providing callback functions to monitor

Taiga UI is an Angular UI component library and accessible design system used for building enterprise web interfaces. It provides a comprehensive collection of reusable interface elements and layout tools, functioning as a mobile-first UI kit with responsive components that adapt to different device capabilities. The library distinguishes itself through an integrated data visualization library featuring various chart types and a dedicated form management framework with built-in validation and formatting for specialized data. It also features AI-driven development workflows by integrating comp

Semi Design is a React UI component library and design token system used to build web application frontends. It provides a collection of pre-built interface elements and a framework of visual constants to maintain consistent branding across a product. The project features a design-to-code workflow that converts visual design drafts into production-ready React code and stylesheets. It includes an internationalization framework for adapting interfaces to different languages and text layouts, as well as a web component wrapper to isolate UI elements for use in SDKs and browser plugins. The libr

React is a JavaScript library for building user interfaces based on a component-driven architecture and unidirectional data flow.