React UI Layout Resources

React Grid System A powerful Bootstrap-like responsive grid system for React. ⚠️ Upgrading to v7 react-grid-system v7 adds a new screen class xxl for

⚠️ Maintenance & support This library continues to be relied upon heavily by Atlassian products, but we are focused on other priorities right now and

About Re-F|ex Re-F|ex is a React flex-based layout component library which I created because none of the components I found out there could satisfy my

react-lines-ellipsis Poor man's multiline ellipsis component for React.JS https://xiaody.github.io/react-lines-ellipsis/ Installation To install the s

Golden Layout Version 2 Version 2.0 is now available from NPM. This version is a substantial change from the previous (1.5.9) version. The change can

FlexLayout is a layout manager that arranges React components in multiple tab sets, tabs can be resized and moved.

windows 11 in react 💻🌈⚡

inspx Pixel perfect layout inspection. Built for React as a proof of concept. Setup Install the package: npm install inspx --save-dev Wrap the root of

🌋 React-first components GUI

Autoprefixer PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twi

Build full featured Windows fluent UI apps using ReactJS. Provides a set of accessible, reusable, and composable React components that make it super easy to create websites and apps.

A draggable and resizable grid layout with responsive breakpoints, for React.

Recreating Windows 11 settings using React JS

Grid A component that can arrange items according to the type of grids. Demo / API Grids MasonryGrid JustifiedGrid FrameGrid PackingGrid MasonryGrid:

The UI design language and React library for Conversational UI

FlexLayout is a layout manager that arranges React components in multiple tab sets, tabs can be resized and moved. Run the Demo Try it now

🍏 Giant Sur A simple UI clone of macOS Big Sur for the web. Technologies React Next.js TypeScript Tailwind CSS Docker Jest Enzyme Demo https://giants

React-Grid-Layout React-Grid-Layout is a grid layout system much like Packery or Gridster, for React. Unlike those systems, it is responsive and suppo

react-native-masonry-list Pinterest like listview made in React Native. It just behaves like the FlatList so it is easy to use. Installation yarn add

React Spaces An easy to understand and nestable layout system, React Spaces allow you to divide a page or container into anchored, scrollable and resi

My portfolio website simulating macOS's GUI, developed with React and tailwindcss.

🧱 masonic npm i masonic A performant and versatile virtualized masonry grid for React based on Brian Vaughn's react-virtualized and further inspired

Make your React Components aware of their width and/or height! Hyper Responsive Components! Performant. Easy to use. Extensive browser support. Suppor

React-PanelGroup A React component for resizable panel group layouts Demo: https://danfessler.github.io/react-panelgroup/ Features Absolute & Relative

Griddle Needs more maintainers - Please see this issue An ultra customizable datagrid component for React Please check out the documentation and examp

Atomic Layout is a spatial distribution library for React. It uses CSS Grid to define layout areas and render them as React components. This pattern e

Splitters for React v. 1.2.0 New version changes fixed issue v. 1.1.0 New version changes fixed issue with getBoundingClientRect in React 16 NPM Demo

Motion Layout Create beautiful immersive React hero animations using shared components. Docs React Motion Layout Docs About Motivation There are amazi

Auth-Form-Design - Beautiful Auth Form Designed using React 🥰. Implemented Password Strength Checker with Password Suggestion and designed with the principle of mobile-first design. 🥰

react-stonecutter Animated grid layout component for React, inspired by Masonry. Choose between CSS Transitions or React-Motion for animation. Demo In

React Masonry An easy to use and simple masonry layout for React Js based on fle

About Re-F|ex Re-F|ex is a React flex-based layout component library which I created because none of the components I found out there could satisfy my

Responsive, sortable, filterable and draggable grid layouts with React Design Principles 👨🏻‍🏫 Muuri-React is the React implementation of the amazin

Quick Jump Quick Jump Features Requirements Installation Using yarn Using npm Usage Basic Example Responsive Example Upgrading Documentation Grid.Prov

React Masonry Component IE8 support if you wish to have IE8 support, v2 with React 0.14 is the highest version available. Table of contents Usage Basi

The website includes a client-side playground which allows components to be rendered and tweaked in real-time.

autoresponsive-react Auto responsive grid layout library for React. Who are using ⭐ ⭐ ⭐ alibaba/ice ⭐ ⭐ ⭐ ice-lab/react-materials ⭐ ⭐ ⭐ ant-design/ant

Rebass Grid Responsive React grid system built with styled-system, with support for styled-components and emotion (previously called grid-styled) http

React Native Responsive Styles rn-responsive-styles Create responsive styles for react-native and react-native-web with minimal rerenders This library

Carpatin is a React JS Admin Dashboard Template that focuses on the management flows of a back-office application. We leverage the Material-UI power of stylizing the components in a way that feels more professional.

Responsive React Flexbox Grid System

Responsive, minimalistic and full-featured native masonry layout (grid) for React JS.

A dragger layout system with React style .

Stilr Encapsulated styling for your javascript components with all the power of javascript and CSS combined. Unique class names (Content Hash Based) U

FlexView A powerful React component to abstract over flexbox and create any layout on any browser. Install yarn add react-flexview Why The flexbox AP

Ultimate Tic-Tac-Toe A browser game implementation of ultimate tic-tac-toe using React, Redux and CSS Grid. Demo Below you see a quick demo of the gam

react-resize-layout This react component resize the layout of HTML using a handle Demo View the demo page Example View the example demo page npm insta

This project sunsetting I created this a relatively long time ago, gave it visibility on the internet and used it in multiple projects, in production,

WebDataRocks integration with React framework This repository holds a sample integration project of WebDataRocks reporting tool with the React framewo

Gericht Restaurant What I Learnt I learnt how to use code my UI using Figma designs Fundamentals of CSS BEM model Animations and Complex Gradients Mor

react-photo-layout-editor 사진 레이아웃을 편집하는 웹 프로그램입니다. This is photo layout editor for react 예전 Instagram blog( http://blog.instagram.com/ )에 있는 정렬된 이미지의

react-photo-layout-editor 사진 레이아웃을 편집하는 웹 프로그램입니다. This is photo layout editor for react 예전 Instagram blog( http://blog.instagram.com/ )에 있는 정렬된 이미지의

React implementation of Windows UI Design System.

comma webapps This mono-repository contains the web applications and packages for the web UIs of comma.ai Contributing Just pick something and work on