For expansion transitions, the strongest matches are primer/react (This repository provides a React UI component library and), arco-design/arco-design (Arco Design is a general React UI component library) and react-bootstrap/react-bootstrap (React Bootstrap includes built-in collapsible UI components with React). gluestack/gluestack-ui and pmndrs/react-spring round out the shortlist. Each is ranked by relevance to your query, popularity and recent activity.
Hand-picked open-source UI expansion animation repositories, ranked by stars and activity. Compare the top tools and find the right fit.
This project is a React UI component library and design system framework. It provides a collection of reusable interface elements and an accessible component toolkit designed to meet web accessibility standards and responsive design requirements. The framework enforces visual uniformity through a design system that uses centralized design tokens for colors, spacing, and typography. It includes a standardized SVG icon set to provide consistent visual cues and markers across user interfaces. The library covers the implementation of design systems through token-based styling and the development
This repository provides a React UI component library and design system framework that includes collapsible interface elements and accessibility support, though it is a broad design system rather than a dedicated accordion animation library.
Arco Design is a React UI component library and design system framework used to build professional web interfaces. It provides a collection of pre-built visual elements and layouts designed to maintain a consistent design language across applications. The system features a token-based theming engine that utilizes hierarchical design variables and CSS variables to enable granular visual customization. This allows for the modification of global and component-level styles through a dedicated theme editor or loader to align the interface with specific brand identities. The framework supports ent
Arco Design is a general React UI component library that includes collapsible panels and accordions, though it is not specifically focused on advanced animation or gesture support.
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.
React Bootstrap includes built-in collapsible UI components with React integration and accessibility support, though it lacks dedicated gesture support and advanced custom easing controls for animations.
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
gluestack/gluestack-ui is a cross-platform React component library with built-in accessibility and customizable source code that covers expansion panels, though it is a broader design system rather than a dedicated animation library.
React-spring is a physics-based animation library designed to create fluid, natural motion for user interface elements and three-dimensional objects. It functions as a declarative motion framework that maps state changes to animated property values, utilizing spring physics—defined by mass, tension, and friction—rather than traditional time-based easing functions to calculate transitions. The library distinguishes itself through a rendering-agnostic architecture that decouples animation logic from specific UI frameworks, allowing for consistent application across web interfaces, 3D scenes, an
React-spring is a physics-based animation library that provides the underlying smooth spring transitions needed for custom accordions and expansion effects in React applications, though it is a general animation engine rather than a pre-built accordion component.
Motion is a high-performance animation library that provides a unified, declarative architecture for managing visual transitions and motion states across web interfaces. By utilizing a lightweight engine, it allows developers to define complex animations through component properties rather than manual DOM manipulation, ensuring consistent behavior across various component-based frameworks and vanilla JavaScript environments. The library distinguishes itself through a sophisticated physics-based motion engine that simulates natural movement using mass, damping, and stiffness parameters. It inc
Motion provides declarative animations, gesture recognition, and cross-framework support for React, which gives you the animation primitives needed to build smooth accordions and collapsible panels even though it is a general-purpose motion library rather than an accordion-specific component.
Auto-animate is a framework-agnostic JavaScript animation library used to automatically animate the entry, exit, and movement of elements within a document. It functions as a transition tool that adds smooth motion to web application elements to prevent abrupt layout jumps during content changes. The utility is designed to be reduced motion compliant, automatically detecting and respecting system-level accessibility settings to disable animations for users with motion sensitivities. It also features a plugin system that allows the replacement of default fade and scale transitions with custom
Auto-animate provides framework-agnostic element transition utilities including React integration and motion accessibility support, making it well-suited for smooth expansion and layout change effects.
Shadcn-ui-expansions is a React and Tailwind CSS component library that provides a collection of pre-built user interface elements and utilities designed to be copied directly into web applications. The project extends the shadcn-ui ecosystem with additional interactive widgets and layout elements to speed up frontend development. The library includes advanced form controls such as date and time pickers, searchable multi-item tag selectors, dual-range numeric sliders, and expanding textareas that automatically adjust height as content grows. Additional components feature animated text typing
This repository provides additional components built on top of shadcn-ui using React and Next.js, fitting the need for accordion and collapse expansions even though it lacks explicit gesture support.
React Move is a declarative animation library for React that animates components by interpolating between start and end states with configurable timing and easing. It provides data-driven transitions for single elements, groups, lists, and SVG elements, supporting staggered timing, custom interpolation for non-numeric values like colors and paths, and drag-and-drop reordering of list items. The library distinguishes itself through its support for custom interpolation functions that replace default numeric interpolation, keyed array reconciliation for tracking items as they enter, update, or l
React Move provides configurable timing, custom easing control, and list transition features for building smooth UI animations, though it requires custom implementation for specific accordion height transitions rather than offering a pre-built collapsible panel component.
Primitives is a library of unstyled, accessible building blocks designed for creating complex interface elements in React. It functions as a headless component framework, providing the underlying logic, state management, and accessibility compliance while leaving all visual styling and design decisions entirely to the developer. The library distinguishes itself through a composition-based architecture that allows developers to build interactive interfaces by nesting small, single-purpose components. This system automatically handles complex requirements such as WAI-ARIA attribute injection, f
Radix UI provides accessible, headless React component primitives including collapsible and accordion elements, but it is a broader UI building block library rather than a dedicated animation-focused library.
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
This library provides React notification toast messages rather than accordion or expansion transition components, making it the wrong category for your collapsible UI needs.
This JavaScript smooth scrolling library is a frontend utility and viewport motion controller designed to animate transitions to anchor links. It intercepts standard link clicks to replace instant jumps with fluid movement toward target elements. The library provides configurable motion easing patterns and speed controls to manage acceleration and deceleration. It includes a mechanism to cancel active animations immediately and supports programmatic scroll triggering via direct function calls. The tool handles positioning offsets to prevent target content from being hidden behind fixed heade
This library handles smooth scrolling and anchor link transitions, making it a viewport motion utility rather than a UI component for accordion or expansion collapse effects.
| Repository | Stars | Language | License | Last push |
|---|---|---|---|---|
| primer/react | 3.9K | TypeScript | MIT | |
| arco-design/arco-design | 5.6K | TypeScript | MIT | |
| react-bootstrap/react-bootstrap | 22.6K | TypeScript | MIT | |
| gluestack/gluestack-ui | 4.9K | TypeScript | — | |
| pmndrs/react-spring | 29.1K | TypeScript | MIT | |
| motiondivision/motion | 32.4K | TypeScript | MIT | |
| formkit/auto-animate | 13.8K | TypeScript | MIT | |
| hsuanyi-chou/shadcn-ui-expansions | 1.9K | TypeScript | MIT | |
| sghall/react-move | 6.6K | JavaScript | MIT | |
| radix-ui/primitives | 18.6K | TypeScript | mit |