awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
bvaughn avatar

bvaughn/react-resizable-panels

0
View on GitHub↗
5,302 stars·218 forks·TypeScript·MIT·17 viewsreact-resizable-panels.vercel.app↗

React Resizable Panels

This project is a system of components and utilities for managing split-view layouts in React applications. It provides a resizable panel system that organizes content into horizontal and vertical areas with draggable boundaries.

The system includes a collapsible UI layout tool for toggling the visibility of panels to maximize available screen space. It supports recursive panel nesting, allowing layouts to be structured as trees where panels contain further groups of resizable panels.

The library covers layout construction through the use of panel dimension constraints, enabling the definition of minimum and maximum sizes. It manages dynamic viewport partitioning and provides mechanisms for building adjustable grids and content areas.

Features

  • Resizable Layout Construction - Provides components to create user interfaces with adjustable content areas resized via draggable boundaries.
  • Draggable and Resizable React Components - Offers a set of React components for building adjustable split-view layouts with boundary constraints.
  • Resizable Layout Panels - Organizes content into horizontal or vertical panels that are adjustable by dragging boundaries.
  • Dynamic Viewport Partitioning - Provides a system for dividing the screen into multiple customizable regions that users can resize.
  • Recursive Nesting - Supports recursive nesting of panels, allowing for complex, tree-structured split-view layouts.
  • Resizable Panel Systems - Manages horizontal and vertical content areas with configurable minimum and maximum dimensions.
  • React Application Development - Enables the construction of complex, flexible grid and panel layouts within React applications.
  • Collapsible Panels - Includes a tool for toggling the visibility of panels to maximize available workspace.
  • Drag-to-Resize Calculations - Calculates panel size changes by tracking mouse and touch movement relative to draggable boundaries.
  • Dimension Constraints - Sets minimum and maximum dimensions for content areas to ensure layout consistency.
  • Screen Percentage Sizing - Tracks panel sizes as percentages to maintain proportional layouts across different window sizes.
  • CSS-Driven Panel Sizing - Updates panel dimensions by modifying CSS variables to minimize runtime overhead and DOM updates.
  • Sizing Constraints - Implements minimum and maximum size limits to constrain panel dimensions during resizing.
  • Data Visualization Libraries - Components for creating resizable layout panels.

Star history

Star history chart for bvaughn/react-resizable-panelsStar history chart for bvaughn/react-resizable-panels

How this analysis was created: This summary and feature list are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI

Projects sharing features with React Resizable Panels

These projects share indexed features with React Resizable Panels. Shared tags can include platform or build tooling; verify the primary use case before treating a result as a replacement.
  • chakra-ui/zagchakra-ui avatar

    chakra-ui/zag

    5,121View on GitHub↗

    Zag is a headless UI state machine library that provides unstyled component logic to ensure consistent behavior across different rendering engines. It functions as a toolkit for modeling complex user interface interactions using statecharts, decoupling the underlying logic and accessibility attributes from visual styling. The library is framework-agnostic, utilizing specialized adapters to bridge its state machine logic with various JavaScript libraries such as React, Solid, Vue, and Svelte. This approach allows developers to maintain a single interaction model while applying any CSS or styli

    TypeScripta11yaccessibilityagnostic
    View on GitHub↗5,121
  • mui/base-uimui avatar

    mui/base-ui

    8,711View on GitHub↗

    Base UI is a headless component library and unstyled framework providing accessible interface primitives. It decouples behavioral logic and state management from the visual layer, allowing developers to implement complex UI patterns while maintaining total control over the final styling. The library implements WAI-ARIA design patterns to ensure all primitives support standard keyboard navigation and screen reader accessibility. It provides a suite of low-level building blocks that handle the internal mechanics of interface elements without bundling any CSS. The framework covers a broad range

    TypeScriptaccessibilitydesign-systemreact
    View on GitHub↗8,711
  • bokuweb/react-rndbokuweb avatar

    bokuweb/react-rnd

    4,278View on GitHub↗

    react-rnd is a JavaScript UI interaction library and React component used to create elements that are both draggable and resizable within a browser window. It functions as a constraint-based layout component that wraps DOM elements to enforce boundaries, grid snapping, and aspect ratio locks during manual adjustments. The library allows for the definition of custom interaction handles to act as the primary triggers for dragging and resizing actions. It supports axis restrictions, boundary limits, and the ability to round position and dimension values to specified pixel increments. The system

    TypeScriptcomponentdragdraggable
    View on GitHub↗4,278
  • bailicangdu/react-pxqbailicangdu avatar

    bailicangdu/react-pxq

    7,507View on GitHub↗

    react-pxq is a React Redux boilerplate and state-driven UI framework designed for building single-page applications. It functions as a starter project template that combines a client-side routing system with global state management to synchronize data across a component hierarchy. The project implements a code-split web application architecture that uses lazy loading to reduce initial bundle sizes. It integrates a navigation system that maps URL paths to components without triggering full page reloads. The framework covers centralized state management through a global store and action-based

    JavaScriptreact
    View on GitHub↗7,507
Compare all 30 related projects→

Frequently asked questions

What does bvaughn/react-resizable-panels do?

This project is a system of components and utilities for managing split-view layouts in React applications. It provides a resizable panel system that organizes content into horizontal and vertical areas with draggable boundaries.

What are the main features of bvaughn/react-resizable-panels?

The main features of bvaughn/react-resizable-panels are: Resizable Layout Construction, Draggable and Resizable React Components, Resizable Layout Panels, Dynamic Viewport Partitioning, Recursive Nesting, Resizable Panel Systems, React Application Development, Collapsible Panels.

Which projects share features with bvaughn/react-resizable-panels?

Projects with overlapping indexed features include: chakra-ui/zag — Zag is a headless UI state machine library that provides unstyled component logic to ensure consistent behavior across… mui/base-ui — Base UI is a headless component library and unstyled framework providing accessible interface primitives. It decouples… hiteshchoudhary/chai-aur-react — This project is an educational course and a collection of frontend projects designed to teach the core concepts and… bokuweb/react-resizable-and-movable — This project is a React UI interaction library and component geometry manager. It provides a set of tools for creating… bokuweb/react-rnd — react-rnd is a JavaScript UI interaction library and React component used to create elements that are both draggable… bailicangdu/react-pxq — react-pxq is a React Redux boilerplate and state-driven UI framework designed for building single-page applications.…