├── .github └── workflows │ └── update-table-of-contents.yml ├── CONTRIBUTING.md ├── README.md ├── code-of-conduct.md └── license /.github/workflows/update-table-of-contents.yml: -------------------------------------------------------------------------------- 1 | name: 'Update Table of Contents' 2 | 3 | on: 4 | push: 5 | branches: [ master ] 6 | pull_request: 7 | branches: [ master ] 8 | 9 | jobs: 10 | update_toc: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - name: git checkout 14 | uses: actions/checkout@v2 15 | 16 | - name: TOC Generator 17 | uses: technote-space/toc-generator@v2.4.0 18 | with: 19 | TOC_TITLE: '## Table of Contents' 20 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | Please abide by the following: 2 | 3 | - Keep the alphabetic sort order of components. 4 | - Reference a component only once. 5 | - Describe it succinctly, sufficiently, and without flair. 6 | - Don't mention "React" in the description. 7 | - Keep descriptions to one line (no wrapping). Use the `Preview changes` tab before committing to ensure this. 8 | - If available, please also include a direct link to a demo site. 9 | - If available, please also include a direct link to a separate docs site. 10 | 11 | Here's an example of how your listing should appear: 12 | 13 | - [React](https://github.com/facebook/react) - [demo](https://reactjs.org/) - [docs](https://reactjs.org/docs/getting-started.html) - A declarative, efficient, and flexible JavaScript library for building user interfaces. 14 | 15 | # TO ADD A LISTING, YOU MUST REMOVE ONE (or more) UN-AWESOME COMPONENT IN ANY PR. 16 | 17 | This is a requirement for listing! 18 | 19 | We want this list to remain fresh. So when you do ANY PR, please also remove at least 20 | 1 un-awesome component. This could be a component that hasn't been updated in 21 | a year or more; a component that has been replaced by better options; or one 22 | that just doesn't really seem "awesome" anymore. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🚀 Absolutely Awesome React Components & Libraries 2 | 3 | This is a list of AWESOME components. Nope, it's NOT a comprehensive list of 4 | every React component under the sun. So, what does "awesome" mean? Well: 5 | 6 | - It solves a real problem 7 | - It does so in a 🦄 unique, 🦋 beautiful, or 🏆 exceptional way. (And it's not super popular and well-known... no point in listing those.) 8 | - It has recent code commits! 9 | 10 | Look for a 🚀 for truly amazing projects. And look for quickie maintainer 11 | commentary and reviews in _(italic parens)_ after some listings of note. 12 | 13 | See also: [Awesome React Frameworks](https://github.com/brillout/awesome-react-frameworks). 14 | 15 | Maintainers: 16 | 17 | - [@petebray](https://github.com/bluepeter), author of [Fluxguard](https://fluxguard.com) — monitor PROD website changes. 18 | - [@brillout](https://twitter.com/brillout), author of [Vike](https://vike.dev) — a fast Vite-based React framework that is flexible, lean, community-driven and dependable. 19 | 20 | ### Contributing 21 | 22 | Please review our [contributing guidelines](https://github.com/brillout/awesome-react-components/blob/master/CONTRIBUTING.md). We keep this list fresh by **requiring all PRs to remove one or more non-awesome entries from this list**. Please ONLY PR a new resource if you are ALSO removing one. 23 | 24 | 25 | 26 | ## Table of Contents 27 | 28 | - [UI Components](#ui-components) 29 | - [Editable data grid / spreadsheet](#editable-data-grid--spreadsheet) 30 | - [Table](#table) 31 | - [Infinite Scroll](#infinite-scroll) 32 | - [Overlay](#overlay) 33 | - [Notification](#notification) 34 | - [Tooltip](#tooltip) 35 | - [Menu](#menu) 36 | - [Sticky](#sticky) 37 | - [Tabs](#tabs) 38 | - [Loader](#loader) 39 | - [Captcha](#captcha) 40 | - [Carousel](#carousel) 41 | - [Buttons](#buttons) 42 | - [Collapse](#collapse) 43 | - [Chart](#chart) 44 | - [Command palette](#command-palette) 45 | - [Tree](#tree) 46 | - [UI Navigation](#ui-navigation) 47 | - [Custom Scrollbar](#custom-scrollbar) 48 | - [Audio / Video](#audio--video) 49 | - [Map](#map) 50 | - [Time / Date / Age](#time--date--age) 51 | - [Photo / Image](#photo--image) 52 | - [Icons](#icons) 53 | - [Paginator](#paginator) 54 | - [Markdown Viewer](#markdown-viewer) 55 | - [Canvas](#canvas) 56 | - [Screenshot](#screenshot) 57 | - [Miscellaneous](#miscellaneous) 58 | - [Form Components](#form-components) 59 | - [Date / Time picker](#date--time-picker) 60 | - [Emoji picker](#emoji-picker) 61 | - [Input Types](#input-types) 62 | - [Autocomplete](#autocomplete) 63 | - [Select](#select) 64 | - [Color Picker](#color-picker) 65 | - [Toggle](#toggle) 66 | - [Slider](#slider) 67 | - [Radio Button](#radio-button) 68 | - [Type Select](#type-select) 69 | - [Tag Input](#tag-input) 70 | - [Autosize Input / Textarea](#autosize-input--textarea) 71 | - [Star Rating](#star-rating) 72 | - [Drag and Drop](#drag-and-drop) 73 | - [Sortable List](#sortable-list) 74 | - [Rich Text Editor](#rich-text-editor) 75 | - [Markdown Editor](#markdown-editor) 76 | - [Image Editing](#image-editing) 77 | - [Form Component Collections](#form-component-collections) 78 | - [Miscellaneous](#miscellaneous-1) 79 | - [Syntax Highlight](#syntax-highlight) 80 | - [UI Layout](#ui-layout) 81 | - [UI Animation](#ui-animation) 82 | - [Parallax](#parallax) 83 | - [UI Frameworks](#ui-frameworks) 84 | - [Responsive](#responsive) 85 | - [Material Design](#material-design) 86 | - [Mobile](#mobile) 87 | - [Component Collections](#component-collections) 88 | - [UI Utilities](#ui-utilities) 89 | - [Reporter](#reporter) 90 | - [Visibility Reporter](#visibility-reporter) 91 | - [Measurement Reporter](#measurement-reporter) 92 | - [Device Input](#device-input) 93 | - [Keyboard Events](#keyboard-events) 94 | - [Scroll Events](#scroll-events) 95 | - [Touch Swipe](#touch-swipe) 96 | - [Mouse Events](#mouse-events) 97 | - [Meta Tags](#meta-tags) 98 | - [Portal](#portal) 99 | - [Test User Behavior](#test-user-behavior) 100 | - [Code Design](#code-design) 101 | - [Data Store](#data-store) 102 | - [Form Logic](#form-logic) 103 | - [Router](#router) 104 | - [Props from server](#props-from-server) 105 | - [Communication with server](#communication-with-server) 106 | - [CSS / Style](#css--style) 107 | - [HTML Template](#html-template) 108 | - [Isomorphic Apps](#isomorphic-apps) 109 | - [Boilerplate](#boilerplate) 110 | - [Miscellaneous](#miscellaneous-2) 111 | - [Utilities](#utilities) 112 | - [i18n](#i18n) 113 | - [Framework bindings / integrations](#framework-bindings--integrations) 114 | - [Integrations with Third Party Services](#integrations-with-third-party-services) 115 | - [Performance](#performance) 116 | - [UI](#ui) 117 | - [Inspect](#inspect) 118 | - [Lazy Load](#lazy-load) 119 | - [App Size](#app-size) 120 | - [Server-Side Rendering](#server-side-rendering) 121 | - [Dev Tools](#dev-tools) 122 | - [Test](#test) 123 | - [Redux](#redux) 124 | - [Inspect](#inspect-1) 125 | - [Miscellaneous](#miscellaneous-3) 126 | - [Miscellaneous](#miscellaneous-4) 127 | - [Static Website Generator](#static-website-generator) 128 | - [Cloud Solutions](#cloud-solutions) 129 | - [Databases](#databases) 130 | 131 | 132 | 133 | ## UI Components 134 | 135 | **[`Back to top ⬆️`](#table-of-contents)** 136 | 137 | ### Editable data grid / spreadsheet 138 | 139 | - [fortune-sheet](https://github.com/ruilisi/fortune-sheet) - An online spreedsheet component that provides out-of-the-box features just like Excel. 140 | - [AG Grid](https://github.com/ag-grid/ag-grid) - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components. 141 | - [gigatables-react](https://github.com/GigaTables/reactables) - Sorting, pagination/infinite scroll, global/column search, AJAX CRUD, and more. 142 | - [MUI X Data grid](https://github.com/mui/mui-x) - [demo/docs](https://mui.com/x/react-data-grid/) - Fast and customizable data grid with advanced features for power users and complex use cases. 143 | - [react-data-grid](https://github.com/adazzle/react-data-grid) - Excel-like grid. 144 | - [revo-grid](https://github.com/revolist/revogrid) - [demo/docs](https://revolist.github.io/revogrid/) - Powerfull Data Grid for React / AngularJS / Vue / Web Components with advanced customization. 145 | - [ReactGrid](https://github.com/silevis/reactgrid) - [demo/docs](https://reactgrid.com/docs/) - Add spreadsheet-like behavior to your app 146 | - [jqwidgets-react-grid](https://www.jqwidgets.com/react/react-grid/) - Filtering, Pagination, Grouping, Export to Excel, PDF, CRUD and more. 147 | 148 | ### Table 149 | 150 | - [ka-table](https://github.com/komarovalexander/ka-table) - [demo](https://komarovalexander.github.io/ka-table/#/overview) - Customizable table component with sorting, filtering, grouping, virtualization, editing etc. 151 | - [mantine-datatable](https://github.com/icflorescu/mantine-datatable) - [demo/docs](https://icflorescu.github.io/mantine-datatable/) - Lightweight table component for Mantine UI applications, with lots of features 152 | - [material-table](https://github.com/mbrn/material-table) - [demo/docs](https://material-table.com/) - Built on Material UI, plus: grouping, tree data, expandable rows, export, inline editing 153 | - [mui-datatables](https://github.com/gregnb/mui-datatables) - Built on Material UI. Search, styling, filtering, resize/hide columns, export, print, select/expand rows. 154 | - [react-data-table](https://github.com/jbetancur/react-data-table-component) - [demo/docs](https://jbetancur.github.io/react-data-table-component/?) - accessible, responsive, themable, declaratively configurable table with sorting, selectable rows, expandable rows, pagination 155 | - [TanStack Table](https://github.com/tannerlinsley/react-table) - [demo](https://tanstack.com/table/v8/docs/examples/react/basic) - Headless UI for building powerful tables & datagrids 156 | - [react-table-library](https://github.com/table-library/react-table-library) - [demo](https://react-table-library.com/) - React Table Library -- an almost headless table library -- for building better tables. 157 | - [rsuite-table](https://github.com/rsuite/rsuite-table) - [demo/docs](http://rsuite.github.io/rsuite-table/) - A table component that supports virtualized. 158 | - [sematable](https://github.com/sematext/sematable) - Client side sorting, pagination, and text filter for redux/react based apps. 159 | - [DevExtreme React Grid](https://devexpress.github.io/devextreme-reactive/react/grid/) - High-performance plugin-based data grid for Bootstrap and Material Design. 160 | - [Smart React Grid](https://htmlelements.com/react/demos/grid/overview/) - Fast and feature-complete data grid with Material Design. 161 | - [KendoReact Grid](https://www.telerik.com/kendo-react-ui/components/grid/) - Powerful data grid component with 100+ ready-to-use features like paging, sorting, export to Excel, and more. 162 | 163 | - [Material-React-Table](https://github.com/KevinVandy/material-react-table) - A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript 164 | - [AG Grid](https://www.ag-grid.com/) - The Best JavaScript Grid in the World 165 | 166 | ### Infinite Scroll 167 | 168 | - [@egjs/react-infinitegrid](https://github.com/naver/egjs-infinitegrid/blob/master/packages/react-infinitegrid) - [npm](https://www.npmjs.com/package/@egjs/react-infinitegrid) - [demo](https://naver.github.io/egjs-infinitegrid/storybook/) - A module used to arrange card elements including content infinitely according to various layout types. 169 | - [react-lazyload](https://github.com/jasonslyvia/react-lazyload) - Lazyload your Component, Image or anything else where the performance matters. 170 | - [react-list](https://github.com/orgsync/react-list) - A versatile infinite scroll React component. 171 | - [@af-utils/virtual](https://github.com/nowaalex/af-utils) - [demo/docs](https://af-utils.com/virtual) - Render large scrollable lists and grids. 172 | - [react-window](https://github.com/bvaughn/react-window) - [demo](https://react-window.now.sh/) - React components for efficiently rendering large lists and tabular data 173 | - [virtua](https://github.com/inokawa/virtua) - [demo](https://inokawa.github.io/virtua/) - A zero-config, fast and small (~3kB) virtual list component for React, Vue and Solid. 174 | 175 | ### Overlay 176 | 177 | _Display overlay / modal / alert / dialog / lightbox / popup_ 178 | 179 | - [react-aria-modal](https://github.com/davidtheclark/react-aria-modal) - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices. 180 | - [react-modal](https://github.com/reactjs/react-modal) - Accessible modal dialog component for React. 181 | - [reoverlay](https://github.com/hiradary/reoverlay) - [demo](https://hiradary.github.io/reoverlay/) - The missing solution for managing modals. 182 | - [sweetalert2](https://github.com/sweetalert2/sweetalert2) - [demo/docs](https://sweetalert2.github.io/) - A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies. 183 | - [sweetalert2-react-content](https://github.com/sweetalert2/sweetalert2-react-content) - Official SweetAlert2 enhancer adding support for React elements as content 184 | 185 | ### Notification 186 | 187 | _Toaster / snackbar — Notify the user with a modeless temporary little popup_ 188 | 189 | - [react-notifications-component](https://github.com/teodosii/react-notifications-component) - [demo](https://teodosii.github.io/react-notifications-component/) - Highly customizable and easy-to-use component for notifications. 190 | - [notistack](https://iamhosseindhv.com/notistack) - [demo](https://codesandbox.io/s/github/iamhosseindhv/notistack/tree/master/examples/simple-example??hidenavigation=1&module=%2FApp.js) - [docs](https://iamhosseindhv.com/notistack/api) - Highly customizable notification snackbars (toasts) that can be stacked on top of each other 191 | - [react-local-toast](https://github.com/OlegWock/react-local-toast) - [demo](https://react-local-toast.netlify.app/showcase/) - [docs](https://react-local-toast.netlify.app/tutorial) - show feedback linked to particular component instead of app-wide toasts. 192 | - [react-toast](https://github.com/moharnadreza/react-toast) - [demo](https://codesandbox.io/s/byqvk) - [docs](https://github.com/moharnadreza/react-toast/blob/main/README.md) - Minimal toast notifications. 193 | - 🚀 [react-toastify](https://github.com/fkhadra/react-toastify) - [demo](https://fkhadra.github.io/react-toastify/) - best bet out there at the moment. Hooks support. No refs. 194 | - [reapop](https://github.com/LouisBarranqueiro/reapop) - A React & Redux notifications system. 195 | - [simple-react-notifications](https://github.com/alexpermyakov/simple-react-notifications) - [demo](https://alexpermyakov.github.io/simple-react-notifications/) - Tiny notification library (1kb gzip). 196 | - [react-hot-toast](https://github.com/timolins/react-hot-toast) - [demo](https://react-hot-toast.com/) - Smoking hot Notifications for React. Lightweight, customizable and beautiful by default. 197 | - [Sonner](https://sonner.emilkowal.ski/) - An opinionated toast component for React. 198 | 199 | ### Tooltip 200 | 201 | - [react-tooltip](https://github.com/wwayne/react-tooltip) - React tooltip component. 202 | 203 | ### Menu 204 | 205 | _Menus / sidebars_ 206 | 207 | - [hamburger-react](https://github.com/luukdv/hamburger-react) - [demo/docs](https://hamburger-react.netlify.app/) - Animated hamburger menu icons for React. 208 | - [react-burger-menu](https://github.com/negomi/react-burger-menu) - An off-canvas sidebar with effects and styles. 209 | - [react-offcanvas](https://github.com/vutran/react-offcanvas) - Off-canvas menus for React. 210 | - [react-planet](https://github.com/innFactory/react-planet) - [demo](https://innfactory.github.io/react-planet/) - Create circular menus which looks like planets. 211 | - [mantine-contextmenu](https://github.com/icflorescu/mantine-contextmenu) - [demo/docs](https://icflorescu.github.io/mantine-contextmenu/) - Context-menu hook/component for applications built with Mantine UI. 212 | 213 | ### Sticky 214 | 215 | _Fixed headers / scroll-up headers / sticky elements_ 216 | 217 | - [react-headroom](https://github.com/KyleAMathews/react-headroom) - Hide your header until you need it. 218 | - [react-stickynode](https://github.com/yahoo/react-stickynode) - A performant and comprehensive React sticky. 219 | 220 | ### Tabs 221 | 222 | - [react-tabs](https://github.com/reactjs/react-tabs) - React tabs component. 223 | - [react-tabtab](https://github.com/ctxhou/react-tabtab) - React, tabs. 224 | 225 | ### Loader 226 | 227 | _Loaders / spinners / progress bars — Let the user know that something is loading_ 228 | 229 | - [react-loader-spinner](https://github.com/mhnpd/react-loader-spinner) - Collection set of react-spinner for async operation. 230 | - [react-redux-loading-bar](https://github.com/mironov/react-redux-loading-bar) - Simple Loading Bar for Redux and React. 231 | - [react-spinners-css](https://github.com/JoshK2/react-spinners-css) - Amazing collection of react spinners components. 232 | - [react-spinners](https://github.com/davidhu2000/react-spinners) - A collection of loading spinner components for react. 233 | - [react-content-loader](https://github.com/danilowoz/react-content-loader) - SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading). 234 | 235 | ### Captcha 236 | 237 | - [react-simple-captcha](https://github.com/masroorejaz/react-simple-captcha) - [npm](https://www.npmjs.com/package/react-simple-captcha) - [demo](https://www.scriptse.com/blog/add-captcha-in-reactjs-application/react-simple-captcha-demo/) - React Simple Captcha is a very powerful, highly customizable and easy to use captcha for React JS. 238 | - [procaptcha](https://github.com/prosopo/captcha) - [demo](https://prosopo.io/) - [docs](https://docs.prosopo.io/) - Privacy focused free CAPTCHA 239 | 240 | ### Carousel 241 | 242 | - [@egjs/react-flicking](https://github.com/naver/egjs-flicking/blob/master/packages/react-flicking/) - [npm](https://www.npmjs.com/package/@egjs/react-flicking) - [demo](https://naver.github.io/egjs-flicking/) - It's reliable, flexible and extendable carousel. 243 | - [react-awesome-slider](https://github.com/rcaferati/react-awesome-slider) - [demo](https://fullpage.caferati.me/) - Fullpage, 3D animated, 60fps media and content slider/carousel. 244 | - [pure-react-carousel](https://github.com/express-labs/pure-react-carousel) - Built from scratch and not highly opinionated. 245 | - [react-id-swiper](https://github.com/kidjp85/react-id-swiper) - A library to use idangerous Swiper as a ReactJs component 246 | - [react-instagram-zoom-slider](https://github.com/skozer/react-instagram-zoom-slider) - [demo](https://skozer.github.io/react-instagram-zoom-slider/) - A slider component with pinch to zoom capabilities inspired by Instagram. 247 | - [react-responsive-carousel](https://github.com/leandrowd/react-responsive-carousel) - React.js Responsive Carousel (with Swipe). 248 | - [react-slick](https://github.com/akiran/react-slick) - React carousel component. 249 | - [keen-slider](https://github.com/rcbyr/keen-slider) - [demo](https://keen-slider.io/examples/#examples) - Performant carousel/slider with native touch/swipe behavior. 250 | - [swiper](https://github.com/nolimits4web/Swiper) - [demo](https://swiperjs.com/demos) - [docs](https://swiperjs.com/react) - The most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. 251 | 252 | ### Buttons 253 | 254 | - [react-awesome-button](https://github.com/rcaferati/react-awesome-button) - [demo](https://caferati.me/demo/react-awesome-button) - 3D animated 60fps buttons with load progress and social share actions. 255 | - [reactive-button](https://github.com/arifszn/reactive-button) - [demo](https://arifszn.github.io/reactive-button/docs/playground) - [docs](https://arifszn.github.io/reactive-button) - A beautiful animated button component with progress indicator. 256 | 257 | ### Collapse 258 | 259 | - [react-accessible-accordion](https://github.com/springload/react-accessible-accordion) - Accessible Accordion component for React. 260 | - [react-collapse](https://github.com/nkbt/react-collapse) - Component-wrapper for collapse animation with react-motion. 261 | - [react-tabbordion](https://github.com/Merri/react-tabbordion) - [demo](https://merri.github.io/react-tabbordion) - Universal, semantic and CSS-only components for creating Accordions and Tabs. 262 | 263 | ### Chart 264 | 265 | _Display data in charts / graphs / diagrams_ 266 | 267 | - [chartify](https://github.com/kirillstepkin/chartify) - React.js plugin for building animated draggable and customizable charts. 268 | - [essential js 2 charts](https://github.com/syncfusion/ej2-react-ui-components/tree/master/components/charts) - Beautiful and interactive charts & graphs for react. 269 | - [echarts for react](https://github.com/hustcc/echarts-for-react) - Wrapper around beautiful Apache Echarts 270 | - [jscharting-react](https://github.com/jscharting/jscharting-react) – React chart component offering a complete set of chart types and engaging data visualizations with [JSCharting](https://jscharting.com/). 271 | - [react-chartist](https://github.com/fraserxu/react-chartist) - React component for Chartist.js. 272 | - [react-charty](https://github.com/99ff00/react-charty) - [demo](https://99ff00.github.io/react-charty/) - Small but powerful interactive data viz with multiple chart types, animations, zooming, theming. 273 | - [react-chartjs-2](https://github.com/jerairrest/react-chartjs-2) - Common react charting components using Chart.js 2.0. 274 | - [react-d3-components](https://github.com/codesuki/react-d3-components) - D3 Components for React. 275 | - [react-dazzle](https://github.com/Raathigesh/Dazzle) - Dashboards made easy in React JS. 276 | - [react-google-charts](https://github.com/RakanNimer/react-google-charts) - React-google-charts React component. 277 | - [react-highcharts](https://github.com/kirjs/react-highcharts) - React-highcharts. 278 | - [react-sigmajs](https://github.com/dunnock/react-sigma) - Lightweight but powerful library for drawing network graphs built on top of SigmaJS. 279 | - [react-sparklines](https://github.com/borisyankov/react-sparklines) - Beautiful and expressive Sparklines React component. 280 | - [react-timeseries-charts](https://github.com/esnet/react-timeseries-charts) - Declarative timeseries charts. 281 | - [react-vis](https://github.com/uber/react-vis) - Data visualization library based on React and d3. 282 | - [recharts](https://github.com/recharts/recharts) - Redefined chart library built with React and D3. 283 | - [rumble-charts](https://github.com/rumble-charts/rumble-charts) - React components for building composable and flexible charts. 284 | - [victory](https://github.com/FormidableLabs/victory) - Data viz for React. 285 | - [semiotic](https://semiotic.nteract.io/) - Semiotic is a data visualization framework for React. 286 | - [DevExtreme React Chart](https://devexpress.github.io/devextreme-reactive/react/chart/) - High-performance plugin-based chart for Bootstrap and Material Design. 287 | - [Smart React Chart](https://www.htmlelements.com/react/demos/chart/overview/) - Feature complete Charting library. 288 | - [react-muze](https://github.com/chartshq/react-muze) - React wrapper for [muze](https://muzejs.org/)(free data visualization library for creating exploratory data visualizations in browser, using WebAssembly) 289 | - [Flowchart React](https://github.com/joyceworks/flowchart-react) - Flowchart & Flowchart designer for React.js. 290 | - [react-dashboard](https://github.com/flatlogic/react-dashboard) - Isomorphic Dashboards. 291 | 292 | ### Command palette 293 | 294 | - [cmdk](https://cmdk.paco.me/) - Fast, composable, unstyled command menu for React. 295 | - [kbar](https://github.com/timc1/kbar) - [demo](https://kbar.vercel.app) - Fast, portable, and extensible cmd+k interface. 296 | 297 | ### Tree 298 | 299 | _Display a tree data structure_ 300 | 301 | - [react-arborist](https://github.com/brimdata/react-arborist) - [demo](https://react-arborist.netlify.app/) - A Full-Featured Tree View: headless, virtualized, multi-selectable, drag-n-drop, keyboard navigation, search 302 | - [react-complex-tree](https://github.com/lukasbach/react-complex-tree) - [demo](https://rct.lukasbach.com/) - [docs](https://rct.lukasbach.com/docs/getstarted) - Unopinionated Accessible Tree Component with Multi-Select, Drag-And-Drop and Search 303 | - [react-treeview](https://github.com/chenglou/react-treeview) - Easy, light, flexible tree view made with React. 304 | - [he-tree-react](https://github.com/phphe/he-tree-react) - [demo](https://he-tree-react.phphe.com/v1/examples) - [docs](https://he-tree-react.phphe.com/) - Tree, customizable UI, flat data, tree data, drag-n-drop, placeholder for drop, foldable, checkbox, virtualized. 305 | 306 | ### UI Navigation 307 | 308 | _Ways to navigate views_ 309 | 310 | - [react-scroll](https://github.com/fisshy/react-scroll) - React scroll component. 311 | - [react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views) - A React Component for binded Tabs and Swipeable Views. 312 | 313 | ### Custom Scrollbar 314 | 315 | - [rc-scrollbars](https://github.com/sakhnyuk/rc-scrollbars) - [demo](https://rc-scrollbars.vercel.app/) - Customizable scrollbars with flex options and 60FPS 316 | - [react-custom-scroll](https://github.com/rommguy/react-custom-scroll) - [demo](http://rommguy.github.io/react-custom-scroll/example/demo.html) - Easily customize the browser scroll bar with native OS scroll behavior. 317 | - [react-shadow-scroll](https://github.com/andrelmlins/react-shadow-scroll) - Component that customizes the image and inserts shadow when scrolling exists. 318 | 319 | ### Audio / Video 320 | 321 | - [react-dailymotion](https://github.com/u-wave/react-dailymotion) - Dailymotion player component for React. 322 | - [react-player](https://github.com/CookPete/react-player) - A react component for playing a variety of URLs, including YouTube. 323 | - [react-soundplayer](https://github.com/soundblogs/react-soundplayer) - Create custom SoundCloud players with React. 324 | - [react-youtube](https://github.com/troybetz/react-youtube) - React.js powered YouTube player component. 325 | - [video-react](https://github.com/video-react/video-react) - A web video player built for the HTML5 world using React library. 326 | - [material-ui-audio-player](https://github.com/Werter12/material-ui-audio-player) - Audio player for material ui design. 327 | - [react-vision-camera](https://github.com/xulihang/react-vision-camera) - Camera component for React using getUserMedia. We can use this component for computer vision tasks like barcode scanning, text recognition, etc. 328 | - [react-barcode-qrcode-scanner](https://github.com/xulihang/react-barcode-qrcode-scanner) - Barcode and QR code scanner component for React. It uses react-vision-camera to access the camera and Dynamsoft Barcode Reader to read barcodes. 329 | 330 | ### Map 331 | 332 | - [google-map-react](https://github.com/istarkov/google-map-react) - Universal google map react component, allows render react components on the google map. 333 | - [pigeon-maps](https://github.com/mariusandra/pigeon-maps) - [demo](https://pigeon-maps.js.org/) - ReactJS Maps without external dependencies. 334 | - [react-geosuggest](https://github.com/ubilabs/react-geosuggest) - A React autosuggest for the Google Maps Places API. 335 | - [react-leaflet](https://github.com/PaulLeCam/react-leaflet) - React components for Leaflet maps. 336 | - [react-map-gl](https://github.com/uber/react-map-gl) - A React wrapper for MapboxGL-js and overlay API. 337 | - [react-svg-map](https://github.com/VictorCazanave/react-svg-map) - [demo](https://victorcazanave.github.io/react-svg-map/) - A set of components to display an interactive SVG map. 338 | 339 | ### Time / Date / Age 340 | 341 | _Display time / date / age_ 342 | 343 | - [react-timeago](https://github.com/nmn/react-timeago) - A simple time-ago component for ReactJs. 344 | - [timeago-react](https://github.com/hustcc/timeago-react) - Format date with `*** time ago` statement. eg: '3 hours ago'. 345 | - [react-google-flight-datepicker](https://github.com/JSLancerTeam/react-google-flight-datepicker) - Google flight date picker implemented in ReactJS. 346 | 347 | ### Photo / Image 348 | 349 | _Display images / photos_ 350 | 351 | - [lightGallery](https://github.com/sachinchoolur/lightGallery) - [demo](https://www.lightgalleryjs.com/) - [docs](https://www.lightgalleryjs.com/docs/react/) - Full-featured lightbox gallery component. 352 | - [react-compare-image](https://github.com/junkboy0315/react-compare-image) - [demo](https://react-compare-image.yuuniworks.com/) - React component to compare two images using a slider. 353 | - [react-image-gallery](https://github.com/xiaolin/react-image-gallery) - Responsive image gallery, carousel, image slider react component. 354 | - [yet-another-react-lightbox](https://github.com/igordanchenko/yet-another-react-lightbox) - [demo](https://yet-another-react-lightbox.com/examples) - [docs](https://yet-another-react-lightbox.com/documentation) - React lightbox component. 355 | - [react-intense](https://github.com/brycedorn/react-intense) - A React component for viewing large images up close. 356 | - [react-photo-album](https://github.com/igordanchenko/react-photo-album) - [demo](https://react-photo-album.com/examples) - [docs](https://react-photo-album.com/documentation) - Responsive React Photo Gallery. 357 | - [react-svg-pan-zoom](https://github.com/chrvadala/react-svg-pan-zoom) - A React component that adds pan and zoom features to SVG. 358 | - [react-particle-image](https://github.com/malerba118/react-particle-image) - [demo](https://malerba118.github.io/react-particle-image-demo/) - Render images as interactive particles. 359 | - [react-imgix](https://github.com/imgix/react-imgix) - Add fast, responsive images as an image, picture, or background! 360 | - [@frameright/react-image-display-control](https://github.com/Frameright/react-image-display-control) - Define zoom regions for smart responsive images. 361 | - [zoom-image](https://github.com/willnguyen1312/zoom-image) - [demo](https://willnguyen1312.github.io/zoom-image/examples/react.html) - [docs](https://willnguyen1312.github.io/zoom-image) - A little yet powerful framework agnostic library to zoom image on the web 362 | 363 | ### Icons 364 | 365 | _Display icons / icon set / emojis_ 366 | 367 | - [iconify-react](https://github.com/iconify/iconify-react) - Over 40k icons from 50+ icon sets, including all popular icon and emoji sets. 368 | - [react-icons](https://github.com/gorangajic/react-icons) - Svg react icons of popular icon packs using ES6 imports. 369 | - [react-open-doodles](https://github.com/lunahq/react-open-doodles) - Awesome free illustrations as react components. 370 | - [react-icomoon](https://github.com/aykutkardas/react-icomoon) - With react-icomoon you can easily use the icons you have selected or created in icomoon. 371 | - [tabler-icons-react](https://tabler-icons-react.vercel.app) - A set of over 450 free MIT-licensed high-quality SVG icons. 372 | - [Lucide](https://github.com/lucide-icons/lucide) - Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons. 373 | 374 | ### Paginator 375 | 376 | _Display a control element to paginate_ 377 | 378 | - [react-paginate](https://github.com/AdeleD/react-paginate) - A ReactJS component that creates a pagination. 379 | - [react-laravel-paginex](https://github.com/lionix-team/react-laravel-paginex) - Laravel Pagination with ReactJS (customizable). 380 | - [paginated](https://github.com/makotot/paginated) - React render props & custom hook to build pagination. 381 | - [react-steps](https://github.com/tkwant/react-steps) - [Demo](https://stepper.tkwant.de/) - Responsive React Stepper. 382 | 383 | ### Markdown Viewer 384 | 385 | _Display parsed markdow source_ 386 | 387 | - [react-markdown](https://github.com/rexxars/react-markdown) - Render Markdown as React components. 388 | 389 | ### Canvas 390 | 391 | _Sketch input using Canvas or SVG_ 392 | 393 | - [react-konva](https://github.com/konvajs/react-konva) - React Konva is a JavaScript library for drawing complex canvas graphics with bindings to the Konva Framework. 394 | - [react-sketch](https://github.com/tbolis/react-sketch) - A Sketch tool for React based applications, backed-up by FabricJS 395 | - [react-sketch-canvas](https://github.com/vinothpandian/react-sketch-canvas) - [Demo](https://vinoth.info/react-sketch-canvas/?path=/story/*) Freehand vector drawing tool for React using SVG as canvas. Accepts input from Mouse, touch, and graphic tablets 396 | - [react-heat-map](https://github.com/uiwjs/react-heat-map) - A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph. 397 | 398 | ### Screenshot 399 | 400 | - [html2canvas](https://github.com/niklasvh/html2canvas) - Take screenshots of any part of your web page using Javascript. 401 | 402 | ### Miscellaneous 403 | 404 | - [puck](https://github.com/measuredco/puck) - [demo](https://puck-editor-demo.vercel.app/edit) - The self-hosted visual editor for React 405 | - [react-advanced-news-ticker](https://github.com/ahmetcanaydemir/react-advanced-news-ticker) - [demo](https://www.ahmetcanaydemir.com/react-advanced-news-ticker/) - A flexible and animated vertical news ticker component 406 | - [react-avatar-generator](https://github.com/JosephSmith127/react-avatar-generator) - Allows users to create random kaleidoscopes to be used as avatars. 407 | - [react-awesome-query-builder](https://github.com/ukrbublik/react-awesome-query-builder) - [demo](https://ukrbublik.github.io/react-awesome-query-builder/) - Visual query builder from form fields, with SQL, MongoDB and JSON export 408 | - [react-blur](https://github.com/javierbyte/react-blur) - React component for blurred backgrounds. 409 | - [react-demo-tab](https://github.com/mkosir/react-demo-tab) - [demo](https://mkosir.github.io/react-demo-tab) - A React component to easily create demos of other components. 410 | - [react-facebook](https://github.com/CherryProjects/react-facebook) - Facebook components like a Login button, Like, Share, Comments, Page or Embedded Post. 411 | - [fastcomments-react](https://github.com/fastcomments/fastcomments-react) - [demo]() - FastComments component for embedding a live comment thread on a page or SPA. 412 | - [react-pdf-viewer](https://github.com/phuoc-ng/react-pdf-viewer) - [docs](https://react-pdf-viewer.dev) - A React component to view a PDF document. 413 | - [react-simple-chatbot](https://github.com/LucasBassetti/react-simple-chatbot) - [demo](https://github.com/anishagg17/PIzzaBuilder) - A simple chatbot component to create conversation chats. 414 | - [react-file-reader-input](https://github.com/ngokevin/react-file-reader-input) - File input component for control for file reading styling and abstraction. 415 | - [react-filter-control](https://github.com/komarovalexander/react-filter-control) - The React filterbuilder component for building the filter criteria in the UI. 416 | - [react-headings](https://github.com/alexnault/react-headings) - Auto-increment your HTML headings (h1, h2, etc.) for improved accessibility and SEO, no matter your component structure, while you keep full control of what's rendered. 417 | - [react-joyride](https://github.com/gilbarbara/react-joyride) - Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!. 418 | - [react-mouse-select](https://github.com/andreizanik/react-mouse-select) - [Demo](https://andreizanik.github.io/react-mouse-select/) A component that allows selecting DOM elements by moving the mouse 419 | - [react-resizable-and-movable](https://github.com/bokuweb/react-resizable-and-movable) - Resizable and movable component for React. 420 | - [react-resizable-box](https://github.com/bokuweb/react-resizable-box) - Resizable component for React. #reactjs. 421 | - [react-searchbox-awesome](https://github.com/axmz/react-searchbox-awesome) - [demo](https://axmz.github.io/react-searchbox-awesome-page/) - Minimalistic searchbox. 422 | - [react-split-pane](https://github.com/tomkp/react-split-pane) - React split-pane component. 423 | - [react-swipe-to-delete-ios](https://github.com/arnaudambro/react-swipe-to-delete-ios) - [demo](https://arnaudambro.github.io/react-swipe-to-delete-ios/) - To delete an item in a list the same way iOS does. 424 | - [react-swipeable-list](https://github.com/marekrozmus/react-swipeable-list) - [demo](https://marekrozmus.github.io/react-swipeable-list/) - Configurable component to render list with swipeable items. 425 | - [typography](https://github.com/KyleAMathews/typography.js) - A powerful toolkit for building websites with beautiful typography. 426 | - [react-pulse-text](https://github.com/Kelsier90/React-Pulse-Text) - [demo/docs](https://kelsier90.github.io/React-Pulse-Text/) - Allows you to animate the text of any property of another component. 427 | - [captcha-image](https://github.com/tpkahlon/captcha-image) - Allows you to generate a random captcha image with options. 428 | - [react-pdf](https://github.com/wojtekmaj/react-pdf) - Display PDFs in your React app as easily as if they were images. 429 | - [react-customizable-chat-bot](https://github.com/chithakumar13/react-chat-bot) - [Demo](https://chithakumar13.github.io/bot-example) - Build your own chatbot matching your brand needs in minutes. 430 | - [@restpace/schema-form](https://github.com/restspace/schema-form) - [Demo](https://restspace.io/react/schema-form/demo) - Easily build complex forms automatically from a JSON Schema. 431 | - [react-darkreader](https://github.com/Turkyden/react-darkreader) - A React Hook for adding a dark / night mode to your site inspired by darkreader. 432 | - [react-apple-signin-auth](https://github.com/A-Tokyo/react-apple-signin-auth) - Apple signin for React using the official Apple JS SDK. 433 | - [react-mrz-scanner](https://github.com/tony-xlh/react-mrz-scanner) - A React component to scan MRZ on passports, visa cards, etc. It is based on Dynamsoft Label Recognizer. 434 | 435 | ### Form Components 436 | 437 | _Let the user enter data_ 438 | 439 | #### Date / Time picker 440 | 441 | _Date picker / time picker / datetime picker / date range picker_ 442 | 443 | - [date-range-picker](https://github.com/almogtavor/date-range-picker) - [demo](https://almogtavor.github.io/date-range-picker/) - A calendar component that supports date, range & ranges picks. 444 | - [react-big-calendar](https://github.com/intljusticemission/react-big-calendar) - Gcal/outlook like calendar component. 445 | - [react-datepicker](https://github.com/Hacker0x01/react-datepicker) - A simple and reusable datepicker component for React. 446 | - [react-day-picker](https://github.com/gpbl/react-day-picker) - Flexible date picker for React. 447 | - [react-flatpickr](https://github.com/coderhaoxin/react-flatpickr) - Flatpickr for React. 448 | - [react-simple-timefield](https://github.com/antonfisher/react-simple-timefield) - [demo](https://antonfisher.com/react-simple-timefield/) - Simple time input field. 449 | - [react-timezone-select](https://github.com/ndom91/react-timezone-select) - [demo](https://ndom91.github.io/react-timezone-select/) - Dynamic, succinct timezone select. Based on `react-select`. 450 | - [DevExtreme React Scheduler](https://devexpress.github.io/devextreme-reactive/react/scheduler/) - High-performance plugin-based scheduler/calendar for Material Design. 451 | - [jQWidgets Scheduler](https://www.jqwidgets.com/react/react-scheduler/) - Feature complete Scheduling library. 452 | - [react-calendar](https://github.com/wojtekmaj/react-calendar) - Ultimate calendar for your React app. 453 | - [react-date-picker](https://github.com/wojtekmaj/react-date-picker) - A date picker for your React app. 454 | - [schedule-x](https://github.com/schedule-x/schedule-x) - Material design event calendar and date picker components. Demo site: https://schedule-x.dev/ 455 | 456 | #### Emoji picker 457 | 458 | - [interweave-emoji-picker](https://github.com/milesj/interweave/tree/master/packages/emoji-picker) - A React based emoji picker powered by Interweave and Emojibase. 459 | 460 | #### Input Types 461 | 462 | _Masked inputs, specialized inputs; email / telephone number / credit card / etc._ 463 | 464 | - [react-credit-cards](https://github.com/amarofashion/react-credit-cards) - Beautiful credit cards for your payment forms. 465 | - [react-payment-inputs](https://github.com/medipass/react-payment-inputs) - [demo](https://medipass.github.io/react-payment-inputs/?path=/story/usepaymentinputs--basic-no-styles) - A zero-dependency container to help with payment card input fields. 466 | - [react-input-mask](https://github.com/sanniassin/react-input-mask) - [demo](http://sanniassin.github.io/react-input-mask/demo.html) - Yet another react component for input masking. 467 | - [@lunasec/react-sdk](https://github.com/lunasec-io/lunasec) - [docs](https://www.lunasec.io/docs/) - Secure, hardened form components that encrypt/tokenize all data automatically. 468 | - [react-numpad](https://github.com/gpietro/react-numpad) - [demo](https://gpietro.github.io/react-numpad-demo/) - Extensible number pad control for numbers, dates and times. 469 | - [react-multi-email](https://github.com/axisj/react-multi-email) - [demo](https://react-multi-email.vercel.app/) - Format multiple emails as the user types. 470 | 471 | #### Autocomplete 472 | 473 | _Autosuggest / autocomplete / typeahead_ 474 | 475 | - [react-autosuggest](https://github.com/moroshko/react-autosuggest) - WAI-ARIA compliant React autosuggest component. 476 | - [react-typeahead](https://github.com/fmoo/react-typeahead) - Pure react-based typeahead and typeahead-tokenizer. 477 | 478 | #### Select 479 | 480 | - [react-aria-menubutton](https://github.com/davidtheclark/react-aria-menubutton) - A fully accessible, easily themeable, React-powered menu button. 481 | - [react-functional-select](https://github.com/based-ghost/react-functional-select) - [demo](https://based-ghost.github.io/react-functional-select/) - Micro-sized & micro-optimized select component for React.js. 482 | - [react-mobile-picker](https://github.com/adcentury/react-mobile-picker) - [demo](https://react-mobile-picker.vercel.app/) - An iOS like select box component. 483 | - [react-select](https://github.com/JedWatson/react-select) - A Select control built with and for React JS. 484 | - [react-column-select](https://github.com/chr-ge/react-column-select) - A column select component built for react. 485 | - [react-select-search](https://github.com/tbleckert/react-select-search) - [demo](https://react-select-search.com/) - A lightweight select component for React 486 | 487 | #### Color Picker 488 | 489 | - [coloreact](https://github.com/elrumordelaluz/coloreact) - A tiny Color Picker for React. 490 | - [react-color](https://github.com/uiwjs/react-color) - Is a tiny color picker widget component for React apps. 491 | - [react-colorful](https://github.com/omgovich/react-colorful) - A tiny (2,5 KB), dependency-free, fast and accessible color picker component. 492 | - [react-input-color](https://github.com/wangzuo/react-input-color) - React input color component with hsv color picker. 493 | 494 | #### Toggle 495 | 496 | - [@anatoliygatt/heart-switch](https://github.com/anatoliygatt/heart-switch) - [demo](https://codesandbox.io/s/demo-for-anatoliygatt-heart-switch-cds5p) - A fully themeable and accessible heart-shaped toggle switch component. 497 | - [react-ios-switch](https://github.com/clari/react-ios-switch) - React switch component. 498 | - [react-toggle](https://github.com/instructure-react/react-toggle) - An elegant, accessible toggle component for React. Also a glorified checkbox. 499 | - [ui-switch](https://github.com/yairEO/ui-switch) - The most complete _Toggle_ component 500 | 501 | #### Slider 502 | 503 | - [react-slider](https://github.com/mpowaga/react-slider) - Slider component for React. 504 | 505 | #### Radio Button 506 | 507 | - [react-radio-group](https://github.com/chenglou/react-radio-group) - Better radio buttons. 508 | 509 | #### Type Select 510 | 511 | _Let the user select something (e.g. a tag) while typing_ 512 | 513 | - [react-autocomplete-input](https://github.com/yury-dymov/react-autocomplete-input) - Autocomplete input field for React. 514 | - [react-mentions](https://github.com/effektif/react-mentions) - Mention people in a textarea. 515 | - [rich-textarea](https://github.com/inokawa/rich-textarea) - A textarea to colorize, highlight, decorate texts and offer autocomplete. 516 | 517 | #### Tag Input 518 | 519 | _Let the user add multiple tags in a single input_ 520 | 521 | - [react-tag-input](https://github.com/prakhar1989/react-tags) - A fantastically simple tagging component for your React projects. 522 | - [react-tagsinput](https://github.com/olahol/react-tagsinput) - A simple react component for inputing tags. 523 | - [react-tokeninput](https://github.com/instructure-react/react-tokeninput) - Tokeninput component for React. 524 | - [tagify](https://github.com/yairEO/tagify) - [demo & docs](https://yaireo.github.io/tagify/) - Lightweight, efficient Tags input component. 525 | 526 | #### Autosize Input / Textarea 527 | 528 | - [react-input-autosize](https://github.com/JedWatson/react-input-autosize) - Auto-resizing input field for React. 529 | - [react-autowidth-input](https://github.com/kierien/react-autowidth-input) - Highly configurable & extensible automatically sized input field built with hooks. 530 | - [react-textarea-autosize](https://github.com/andreypopp/react-textarea-autosize) - <textarea /> component for React which grows with content. 531 | 532 | #### Star Rating 533 | 534 | - [react-rating](https://github.com/smastrom/react-rating) - [demo](https://react-rating.onrender.com/) - Zero-dependency, highly customizable rating component. 535 | - [react-awesome-stars-rating](https://github.com/fedoryakubovich/react-awesome-stars-rating) - [demo](https://react-awesome-stars-rating.herokuapp.com/) - The star rating component with accessibility. 536 | - [react-star-rating-input](https://github.com/ikr/react-star-rating-input) - React.js component for entering 0-5 (or more) stars. 537 | 538 | #### Drag and Drop 539 | 540 | - [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd) - Beautiful and accessible drag and drop for lists with React 541 | - [react-dnd](https://github.com/gaearon/react-dnd) - Drag and Drop for React. 542 | - [react-drag-sizing](https://github.com/fritx/react-drag-sizing) - "Drag to resize" (sizing) as React Component. 543 | - [react-draggable](https://github.com/mzabriskie/react-draggable) - React draggable component. 544 | - [react-dragula](https://github.com/bevacqua/react-dragula) - Drag and drop so simple it hurts. 545 | - [react-dropzone](https://github.com/okonet/react-dropzone) - Simple HTML5 drag-drop zone with React.js. 546 | - [react-movable](https://github.com/tajo/react-movable) - Accessible and minimalistic (<4kB gzipped) library for vertical drag and drop in lists and tables. 547 | - [react-sortable-pane](https://github.com/bokuweb/react-sortable-pane) - Sortable and resizable pane component for React. 548 | - [neodrag](https://github.com/PuruVJ/neodrag) - Multi-framework libraries for dragging. Choose your framework, the dragging API behavior will stay the same. 549 | 550 | #### Sortable List 551 | 552 | _Let the user define an order on a list_ 553 | 554 | - [react-anything-sortable](https://github.com/jasonslyvia/react-anything-sortable) - Sort any children with touch support and IE8 compatibility. 555 | - [sortablejs](https://github.com/SortableJS/Sortable) - Lists reorderable by drag-and-drop, within and among lists. 556 | 557 | #### Rich Text Editor 558 | 559 | - [alloyeditor](https://github.com/liferay/alloy-editor) - WYSIWYG editor based on CKEditor with completely rewritten UI. 560 | - [ckeditor4-react](https://github.com/ckeditor/ckeditor4-react) - An official CKEditor 4 rich text editor wrapper. 561 | - [ckeditor5-react](https://github.com/ckeditor/ckeditor5-react) - An official CKEditor 5 rich text editor wrapper. 562 | - [draft-js](https://github.com/facebook/draft-js) - A React framework for building text editors. 563 | - [edtr-io](https://github.com/edtr-io/edtr-io) - [demo](https://edtr.io/) - [docs](https://edtr.io/docs/getting-started) - WYSIWYG in-line web editor with plugins. 564 | - [megadraft](https://github.com/globocom/megadraft) - Rich Text editor built on top of draft.js. 565 | - [react-ace](https://github.com/securingsincity/react-ace) - Ace (Advanced Code Editor) wraper. 566 | - [react-codemirror](https://github.com/uiwjs/react-codemirror) - [demo](https://uiwjs.github.io/react-codemirror/) - CodeMirror component for React. 567 | - [react-contenteditable](https://github.com/lovasoa/react-contenteditable) - React component for a div with editable contents. 568 | - [react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg) - WYSIWYG editor build on top of [DraftJS](https://draftjs.org/). 569 | - [react-editor](https://github.com/fritx/react-editor) - Simple richtext editor that can insert images and HTML. 570 | - [react-medium-editor](https://github.com/wangzuo/react-medium-editor) - medium-editor wrapper. 571 | - [react-monacoeditor](https://github.com/jaywcjlove/react-monacoeditor) - Monaco Editor component for React. 572 | - [react-simple-code-editor](https://github.com/satya164/react-simple-code-editor) - Simple no-frills code editor with syntax highlighting 573 | - [react-quill](https://github.com/zenoamaro/react-quill) - Quill wrapper. 574 | - [react-trumbowyg](https://github.com/RD17/react-trumbowyg) - [Trumbowyg](https://alex-d.github.io/Trumbowyg/) wrapper. 575 | - [remirror](https://github.com/remirror/remirror) - [demo](https://remirror.io/playground) - [docs](https://remirror.io/docs) - ProseMirror toolkit for React. 576 | - [slate](https://github.com/ianstormtaylor/slate) - [demo](http://slatejs.org/) - [docs](https://docs.slatejs.org/) - A completely customizable framework for building rich text editors. 577 | - [smartblock](https://github.com/appleple/smartblock) - [demo](https://appleple.github.io/smartblock/) - [docs](https://appleple.github.io/smartblock/get-started) - Block based WYSIWYG editor based on ProseMirror. 578 | - [tiptap](https://github.com/ueberdosis/tiptap) - [demo](https://tiptap.dev/) - [docs](https://tiptap.dev/introduction) - The headless editor framework for web artisans. 579 | 580 | #### Markdown Editor 581 | 582 | - [react-simplemde-editor](https://github.com/RIP21/react-simplemde-editor) - React component wrapper for [EasyMDE (the most fresh SimpleMDE fork)](https://github.com/Ionaru/easy-markdown-editor). 583 | - [react-markdown-editor](https://github.com/jrm2k6/react-markdown-editor) - A markdown editor using React/Reflux. 584 | - [react-md-editor](https://github.com/uiwjs/react-md-editor) - A simple markdown editor with preview, implemented with React.js and TypeScript. 585 | 586 | #### Image Editing 587 | 588 | _Image manipulation_ 589 | 590 | - [react-avatar-editor](https://github.com/mosch/react-avatar-editor) - Facebook-like, avatar / profile picture component. 591 | - [react-avatar-generator](https://github.com/JosephSmith127/react-avatar-generator) - Generate fun kaleidoscope for user avatars. 592 | - [react-easy-crop](https://github.com/ricardo-ch/react-easy-crop) - Component to crop/rotate images/videos with easy interactions. Touch friendly. 593 | - [react-image-crop](https://github.com/DominicTobias/react-image-crop) - A responsive image cropping tool for React. 594 | - [react-image-cropper](https://github.com/jerryshew/react-image-cropper) - Image cropper. 595 | - [react-advanced-cropper](https://github.com/advanced-cropper/react-advanced-cropper) - A react cropper library to create the cropper exactly suited for your website design. 596 | - [react-mobile-cropper](https://github.com/advanced-cropper/react-mobile-cropper) - A ready-to-use image cropping library highly inspirited by popular Android croppers. Based on `react-advanced-cropper`. 597 | 598 | #### Form Component Collections 599 | 600 | - [formsy-material-ui](https://github.com/mbrookes/formsy-material-ui) - A Formsy compatibility wrapper for Material UI form components. 601 | - [formsy-react-components](https://github.com/twisty/formsy-react-components) - A set of React JS components for use in a formsy-react form. 602 | - [react-input-enhancements](https://github.com/alexkuz/react-input-enhancements) - Set of enhancements for input control. 603 | - [react-widgets](https://github.com/jquense/react-widgets) - An à la carte set of polished, extensible, and accessible inputs. 604 | 605 | #### Miscellaneous 606 | 607 | - [@anatoliygatt/numeric-stepper](https://github.com/anatoliygatt/numeric-stepper) - [demo](https://codesandbox.io/s/demo-for-anatoliygatt-numeric-stepper-mllfyl) - A fully themeable and accessible numeric stepper component. 608 | - [interweave](https://github.com/milesj/interweave) - React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more. 609 | - [react-designer](https://github.com/react-designer/react-designer) - Easy to configure, lightweight, editable vector graphics in your react components. 610 | - [react-upload-gallery](https://github.com/TPMinan/react-upload-gallery) - React for Upload Image Gallery. Drag & Drop, Sortable, Customize. 611 | 612 | #### Syntax Highlight 613 | 614 | - [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter) - Syntax highlighting component with Prismjs or Highlightjs AST using inline styles. 615 | 616 | ## UI Layout 617 | 618 | **[`Back to top ⬆️`](#table-of-contents)** 619 | 620 | _Components to layout the app's UI_ 621 | 622 | - [autoresponsive-react](https://github.com/xudafeng/autoresponsive-react) - Auto responsive grid layout library. 623 | - [golden-layout](https://github.com/deepstreamIO/golden-layout) - A multi-screen JavaScript Layout manager. 624 | - [hedron](https://github.com/JSBros/hedron) - A no-frills flexbox grid system, powered by styled-components. 625 | - [m-react-splitters](https://github.com/martinnov92/React-Splitters) - Splitter component, written in TypeScript. 626 | - [muuri-react](https://github.com/Paol-imi/muuri-react) - [demo](https://1czo5.csb.app/) - [docs](https://paol-imi.github.io/muuri-react) - Responsive, sortable, filterable and draggable grid layouts. 627 | - [react-grid-layout](https://github.com/STRML/react-grid-layout) - A draggable and resizable grid layout with responsive breakpoints, for React. 628 | - [react-masonry-component](https://github.com/eiriklv/react-masonry-component) - Wrapper for @desandro's Masonry. 629 | - [react-reflex](https://github.com/leefsmp/Re-Flex) - Flex layout container component for advanced React web applications. 630 | - [react-spaces](https://github.com/aeagle/react-spaces) - [demo/docs](https://www.allaneagle.com/react-spaces/demo/) - Nestable anchored, resizable, scrollable components. 631 | - [react-stonecutter](https://github.com/dantrain/react-stonecutter) - Animated grid layout component. 632 | - [react-colrow](https://github.com/phphe/react-colrow) - Responsive grid layout components. Based on css flexbox. Support fraction width, auto grow. 633 | - [react-schematic](https://github.com/umeshmk/react-schematic) - [demo](https://umeshmk.github.io/react-schematic) - Build responsive layouts using styled schematics without an overhead of any theme configuration 634 | 635 | ## UI Animation 636 | 637 | **[`Back to top ⬆️`](#table-of-contents)** 638 | 639 | _Animate transitions_ 640 | 641 | - [data-driven-motion](https://github.com/tkh44/data-driven-motion) - Easily animate your data. 642 | - [react-animatable](https://github.com/inokawa/react-animatable) - An animation library using Web Animations API. 643 | - [react-anime](https://github.com/stelatech/react-anime) - A super easy animation library. 644 | - [react-flip-move](https://github.com/joshwcomeau/react-flip-move) - Effortless animation between DOM changes (eg. list reordering) using the FLIP technique. 645 | - [react-gsap-enhancer](https://github.com/azazdeaz/react-gsap-enhancer) - Use the full power of React and GSAP together. 646 | - [react-tsparticles](https://github.com/matteobruni/tsparticles/blob/master/components/react/README.md) - A lightweight component to easily create interactive particles animations 647 | - [react-motion](https://github.com/chenglou/react-motion) - A spring that solves your animation problems. 648 | - [react-mt-svg-lines](https://github.com/moarwick/react-mt-svg-lines) - Wrapper to animate the line stroke in SVGs. 649 | - [react-router-transition](https://github.com/maisano/react-router-transition) - Transitions built for react-router, powered by react-motion. 650 | - [react-spring](https://github.com/react-spring/react-spring) - A spring physics based animation library. 651 | - [react-ts-typewriter](https://github.com/gerardmarquinarubio/ReactTypewriter) - [demo](https://codesandbox.io/s/react-typewriter-example-mgyclf) - Easy to use and customizable typewriter effect for any text. 652 | - [framer-motion](https://github.com/framer/motion) - An animation and gesture library. 653 | - [react-spark-scroll](https://github.com/gilbox/react-spark-scroll) - Scroll-based actions and animations for react. 654 | - [react-track](https://github.com/gilbox/react-track) - Track the position of DOM elements. Create cool animations. 655 | - [react-transitive-number](https://github.com/Lapple/react-transitive-number) - Apply transition effect to numeric strings, a la old Groupon timers. 656 | - [react-web-animation](https://github.com/bringking/react-web-animation) - React components for the Web Animations API -. 657 | - [auto-size-transition](https://github.com/DualWield/auto-size-transition) - A component that scale dynamically according to the internal children size 658 | - [react-particles-bg](https://github.com/lindelof/particles-bg) - Particles backgrounds. 659 | - [gooey-react](https://github.com/luukdv/gooey-react) - [demo/docs](https://gooey-react.netlify.app/) - The gooey effect for React, used for shape blobbing / metaballs. 660 | - [react-voodoo](https://github.com/react-voodoo/react-voodoo) - [demo/samples](https://github.com/react-voodoo/react-voodoo-samples) - Additive animation engine allowing complex android/iOs-like animations, rendering sliders on SSR, predictive inertia, multitouch, etc 661 | 662 | ### Parallax 663 | 664 | - [simple-parallax-js](https://github.com/geosigno/simpleParallax.js) - [demo](https://simpleparallax.com) - The easiest way to get a parallax effect with React and JavaScript on images 665 | - [react-parallax-tilt](https://github.com/mkosir/react-parallax-tilt) - [demo](https://mkosir.github.io/react-parallax-tilt) - Easily apply parallax tilt hover effect on components. 666 | 667 | ## UI Frameworks 668 | 669 | **[`Back to top ⬆️`](#table-of-contents)** 670 | 671 | ### Responsive 672 | 673 | _Set of components + responsive layout system_ 674 | 675 | - [AgnosticUI](https://www.agnosticui.com/) - Accessible React component primitives that also work with Vue 3, Svelte, and Angular! 676 | - [ant-design](https://github.com/ant-design/ant-design) - [demo/docs](https://ant.design/docs/react/introduce) - A UI Design Language from China. Individual [components](http://react-component.github.io/) available. 677 | - [atlaskit](https://atlaskit.atlassian.com/packages) - Atlassian's official UI library, with components from _badge_ to _tree table_. 678 | - [base web](https://baseweb.design) - Base Web is a foundation for initiating, evolving, and unifying web products. 679 | - [carbon](https://github.com/carbon-design-system/carbon) - [demo/docs](https://www.carbondesignsystem.com/) - A design system built by IBM. 680 | - [cdbreact](https://github.com/Devwares-Team/cdbreact) - [demo](https://www.devwares.com/product/contrast) - [docs](https://www.devwares.com/docs/contrast/react/index) - Elegant UI Kit library and reusable components for building mobile-first, responsive websites and web apps. 681 | - [chakra-ui](https://github.com/chakra-ui/chakra-ui) - [demo/docs](https://chakra-ui.com) - Simple, Modular & Accessible UI Components for your React Applications. 682 | - [ChatUI](https://github.com/alibaba/ChatUI) - [demo/docs](https://chatui.io/) - The UI design language and React library for Conversational UI 683 | - [CoreUI for React](https://github.com/coreui/coreui-react) - [demo/docs](https://coreui.io/react) - Open Source UI components library. 684 | - [evergreen](https://github.com/segmentio/evergreen) - [demo/docs](https://evergreen.segment.com) - Evergreen React UI Framework by Segment. 685 | - [fluentui](https://github.com/microsoft/fluentui) - UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior. 686 | - [geist-ui](https://github.com/geist-org/geist-ui) - Modern and minimalist React UI library. 687 | - [gestalt](https://github.com/pinterest/gestalt) - [demo/docs](https://pinterest.github.io/gestalt/#/) - A set of components that supports Pinterest’s design language. 688 | - [grommet](https://github.com/grommet/grommet) - The most advanced UX framework for enterprise applications. 689 | - [Mantine](https://github.com/mantinedev/mantine) - [demo/docs](https://mantine.dev/) - A fully featured library with 100+ hooks and components with native dark theme support 690 | - [orbit](https://github.com/kiwicom/orbit) - Components for building travel oriented projects. 691 | - [flowbite-react](https://github.com/themesberg/flowbite-react) - Open-source UI component library based on React, Tailwind CSS, and Flowbite. 692 | - [primereact](https://github.com/primefaces/primereact) - A complete UI Framework with 50+ components featuring material, bootstrap and custom themes. 693 | - [radix-ui](https://www.radix-ui.com/) - Unstyled, accessible components for building high‑quality design systems and web apps. 694 | - [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) - Bootstrap components built with React. 695 | - [react-foundation](https://github.com/digiaonline/react-foundation) - Foundation as React components. 696 | - [reakit](https://github.com/ariakit/ariakit) - [demo/docs](https://reakit.io/docs/button/) Toolkit for building accessible rich web apps 697 | - [searchkit](https://github.com/searchkit/searchkit) - React UI components / widgets. The easiest way to build a great search experience with Elasticsearch. 698 | - [semantic-ui-react](https://github.com/Semantic-Org/Semantic-UI-React) - The official Semantic-UI-React integration. 699 | - [semi-design](https://github.com/DouyinFE/semi-design) - [demo/docs](https://semi.design/) - A modern, comprehensive, flexible design system. 700 | - [shadcn/ui](https://github.com/shadcn-ui/ui) - [demo](https://ui.shadcn.com/examples/mail) - [docs](https://ui.shadcn.com/docs) - Beautifully designed components that you can copy and paste into your apps. 701 | - [shineout](https://github.com/sheinsight/shineout) - [demo](https://shine.wiki/1.4.x/en/components/GetStart) - Chinese-friendly set of components: form elements, navigation, table, tree, tree select drop-down etc. 702 | 703 | #### Material Design 704 | 705 | - 🚀 [Material UI](https://github.com/mui/material-ui) - Full suite of components. Build your own design system, or start with Material Design. 706 | - [Autocomplete](https://mui.com/material-ui/react-autocomplete/) - Accessible autocomplete, combobox, multiselect 707 | - [Material Icons](https://mui.com/material-ui/material-icons/) - 1,000+ SVG material icons. 708 | - [Modal](https://mui.com/material-ui/react-modal/) - Accessible modal dialog component. 709 | - [Slider](https://mui.com/material-ui/react-slider/) - Accessible slider component. 710 | - [Table](https://mui.com/material-ui/react-table/) - table with sorting, selecting, pagination, virtualized. 711 | - [Tree View](https://mui.com/material-ui/react-tree-view/) - Accessible tree view component for React. 712 | - [react-essence](https://github.com/Evo-Forge/Essence) - Essence - The Essential Material Design Framework. 713 | - [react-materialize](https://github.com/react-materialize/react-materialize) - Material design for react, powered by materializecss. 714 | - [react-toolbox](https://github.com/react-toolbox/react-toolbox) - A set of React components implementing Google's Material Design. 715 | - [mdbootstrap](https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design) - React Bootstrap with Material Design 716 | 717 | ### Mobile 718 | 719 | - [antd-mobile](https://github.com/ant-design/ant-design-mobile) - Configurable Mobile UI from China. 720 | - [Ionic React](https://ionicframework.com/blog/announcing-ionic-react/) - Ionic Framework: easily build Android, Desktop and Progressive Web Apps with one code base. 721 | - [OnsenUI](https://github.com/OnsenUI/OnsenUI/) - [demo/docs](https://onsen.io/v2/guide/react/) - Mobile app framework with Material and flat (iOS) designs. Based on Web Components. 722 | 723 | ### Component Collections 724 | 725 | - [blueprint](https://github.com/palantir/blueprint) - [demo](https://blueprintjs.com/) - [docs](https://blueprintjs.com/docs/) - UI toolkit for building complex, data-dense web interfaces for desktop (not mobile) applications. 726 | - [dataminr-react-components](https://github.com/dataminr/react-components) - Collection of reusable React Components and utility functions. 727 | - [shards-react](https://github.com/DesignRevision/shards-react) - [docs/demo](https://designrevision.com/docs/shards-react/getting-started) - A beautiful and modern React design system. Freemium. 728 | - [aframe-react](https://github.com/ngokevin/aframe-react) - Build virtual reality experiences with A-Frame and React. 729 | - [react-admin](https://github.com/marmelab/react-admin) - Build admin user experiences on top of REST and GraphQL services. 730 | - [refine](https://github.com/pankod/refine) - [demo](https://example.refine.dev) - [docs](https://refine.dev/docs) - Build data-intensive applications in no time. It ships with Ant Design System, an enterprise-level UI toolkit. 731 | - [matrix-card](https://github.com/MehmetKaplan/matrix-card) - [demo](https://mehmetkaplan.github.io/matrix-card/) - Simplest possible component to generate matrix rain style cards. 732 | - [rsuite](https://github.com/rsuite/rsuite) - [demo/docs](https://rsuitejs.com/) - Suite of components for "enterprise system products". 733 | - [lens-ui](https://github.com/luciancaetano/lens-ui) - [docs](https://github.com/luciancaetano/lens-ui/blob/main/docs/introduction.md) - A Suit of components focused on simplicity. 734 | 735 | ## UI Utilities 736 | 737 | **[`Back to top ⬆️`](#table-of-contents)** 738 | 739 | ### Reporter 740 | 741 | _Report computed styles_ 742 | 743 | #### Visibility Reporter 744 | 745 | _Report when a component becomes visible/hidden_ 746 | 747 | - [react-intersection-observer](https://github.com/thebuilder/react-intersection-observer) - React implementation of the Intersection Observer API. 748 | - [react-visibility-sensor](https://github.com/joshwnj/react-visibility-sensor) - Sensor component. 749 | - [react-waypoint](https://github.com/brigade/react-waypoint) - A React component to execute a function whenever you scroll to an element. 750 | 751 | #### Measurement Reporter 752 | 753 | _Determine and report measurements of an element_ 754 | 755 | - [react-component-queries](https://github.com/ctrlplusb/react-component-queries) - Provide props to your Components based on their Width and/or Height. 756 | - [react-container-dimensions](https://github.com/okonet/react-container-dimensions) - Wrapper component that detects element resize. 757 | - [react-dimensions](https://github.com/digidem/react-dimensions) - React higher-order component to get dimensions of container. 758 | - [react-height](https://github.com/nkbt/react-height) - Component-wrapper to determine and report children elements height. 759 | - [react-measure](https://github.com/souporserious/react-measure) - Compute measurements of a React component. 760 | - [react-sizeme](https://github.com/ctrlplusb/react-sizeme) - Make your React Components aware of their width and height. 761 | 762 | ### Device Input 763 | 764 | _Turn user input into actions_ 765 | 766 | #### Keyboard Events 767 | 768 | - [react-hotkeys](https://github.com/chrisui/react-hotkeys) - Declarative hotkey and focus area management for React. 769 | - [react-key-handler](https://github.com/ayrton/react-key-handler) - React component to handle keyboard events. 770 | - [react-keydown](https://github.com/glortho/react-keydown) - Lightweight keydown wrapper for React components. 771 | - [react-shortcuts](https://github.com/avocode/react-shortcuts) - Manage keyboard shortcuts from one place. 772 | - [useKeyCapture](https://github.com/pranesh239/use-key-capture) - A custom hook to ease the key-press listeners of a target/global. 773 | - [react-keyboard-navigator](https://github.com/zheeeng/react-keyboard-navigator) - A suite of React components and hook for selecting sibling components through the keyboard. 774 | 775 | #### Scroll Events 776 | 777 | - [react-scroll-components](https://github.com/jeroencoumans/react-scroll-components) - A set of components that react to page scrolling. 778 | 779 | #### Touch Swipe 780 | 781 | - [react-swipe](https://github.com/voronianski/react-swipe) - Swipe.js as a React component. 782 | 783 | #### Mouse Events 784 | 785 | - [react-hook-mighty-mouse](https://github.com/mkosir/react-hook-mighty-mouse) - [demo](https://mkosir.github.io/react-hook-mighty-mouse) - Hook that tracks mouse events on selected element. 786 | 787 | ### Meta Tags 788 | 789 | _Set meta tags, , children of <head>_ 790 | 791 | - [react-helmet-async](https://github.com/staylor/react-helmet-async#readme) - Thread-safe Helmet for React 16+ and friends 792 | - [react-helmet](https://github.com/nfl/react-helmet) - A document head manager for React. 793 | 794 | ### Portal 795 | 796 | _Render an element at an arbitrary DOM node_ 797 | 798 | - [react-layer-stack](https://github.com/fckt/react-layer-stack) - Simple but ubiquitously powerful and agnostic layering system for React. 799 | - [react-portal](https://github.com/tajo/react-portal) - React component for transportation of modals, lightboxes, loading bars... to document.body. 800 | 801 | ### Test User Behavior 802 | 803 | _A/B tests, experiments, ..._ 804 | 805 | - [react-experiments](https://github.com/HubSpot/react-experiments) - React components for implementing UI experiments. 806 | 807 | ## Code Design 808 | 809 | **[`Back to top ⬆️`](#table-of-contents)** 810 | 811 | _Libraries that help with code design_ 812 | 813 | ### Data Store 814 | 815 | _Data flow / data management / data stores / components state / data flow_ 816 | 817 | - [baobab-react](https://github.com/Yomguithereal/baobab-react) - React integration for Baobab. 818 | - [cerebral](https://github.com/cerebral/cerebral) - A state controller with its own debugger. 819 | - [effector-react](https://github.com/effector/effector) - React bindings for effector, an effective multi-store state manager. 820 | - [fireproof](https://github.com/fireproof-storage/fireproof) - [demo](https://fireproof.storage/try-free/) - [docs](https://use-fireproof.com/docs/welcome) Pure JS, zero dependency, CRDT database - runs in the browser and connects to any cloud or backend 821 | - [RxDB](https://rxdb.info/) - [demo](https://github.com/pubkey/rxdb/tree/master/examples/react) - [docs](https://rxdb.info/quickstart.html) A fast, local first, reactive Database for JavaScript Applications 822 | - [fluxible](https://github.com/yahoo/fluxible) - A pluggable container for universal flux applications. 823 | - [kea](https://github.com/mariusandra/kea) - High level architecture for React apps. 824 | - [react-i13n](https://github.com/yahoo/react-i13n) - A performant, scalable and pluggable approach to instrumenting your React application. 825 | - [react-redux](https://github.com/reactjs/react-redux) - Official React bindings for Redux. 826 | - [redux-batched-actions](https://github.com/tshelburne/redux-batched-actions) - Reducer + action to reduce actions under a single subscriber notification. 827 | - [redux](https://github.com/reactjs/redux) - Predictable state container for JavaScript apps. 828 | - [reselect](https://github.com/reactjs/reselect) - Selector library for Redux. 829 | - [resourcerer](https://github.com/SiftScience/resourcerer) - Declarative data-fetching framework for REST APIs 830 | - [synergies](https://github.com/lukasbach/synergies) - [docs](https://synergies.js.org) A performant and distributed context-state library for creating reusable React state logic by synergyzing atomar context pieces. 831 | - [zustand](https://zustand.surge.sh/) - [docs](https://github.com/pmndrs/zustand) - A fast bearbones state-management solution using simplified flux principles and boilerplate-free hook api. 832 | - [teaful](https://github.com/teafuljs/teaful) - Tiny, easy and powerful React state management 833 | 834 | ### Form Logic 835 | 836 | - [data-driven-forms](https://github.com/data-driven-forms/react-forms) - A declarative way for building forms with all the functionality. 837 | - [formik](https://github.com/jaredpalmer/formik) - Build forms without tears and supports Validation in ease. 838 | - [formsy-react](https://github.com/formsy/formsy-react/) - A form input builder and validator for React JS. 839 | - [Phormal](https://github.com/phormal/phormal) - [Docs & Demos](https://phormal.dev/getting-started/react) - Responsive, multilingual forms with built-in validation, support for dark mode and right-to-left languages. 840 | - [react-hook-form](https://github.com/react-hook-form/react-hook-form) - React hooks for form validation without the hassle. 841 | - [react-jsonschema-form](https://github.com/mozilla-services/react-jsonschema-form) - A React component for building Web forms from JSONSchema. 842 | - [react-client-validation](https://github.com/0529bill/react-client-validation) - Simple and super lightweight validation for React. 843 | - [react-final-form](https://github.com/final-form/react-final-form) - Subscription-based form state management 844 | - [react-formawesome](https://github.com/MAKARD/react-formawesome) - Complex library for creating awesome forms. 845 | - [surveyjs](https://github.com/surveyjs/survey-library) - The advanced Survey and Form library 846 | - [Formily](https://github.com/alibaba/formily) - High performance, extensible, and Typescript friendly 847 | - [hook-form-react](https://github.com/luoanb/hook-form-react) - [docs](https://luoanb.github.io/hook-form-react) - A lightweight, dependency-free solution React hooks for form validation. 848 | 849 | ### Router 850 | 851 | - [react-router-component](https://github.com/STRML/react-router-component) - Declarative router component for React. 852 | - [react-router-scroll](https://github.com/taion/react-router-scroll) - React Router scroll management. 853 | - [react-router](https://github.com/reactjs/react-router) - A complete routing library for React. 854 | - [redux-first-history](https://github.com/salvoravida/redux-first-history) - Redux First History - Redux history binding support react-router - @reach/router - wouter 855 | - [universal-router](https://github.com/kriasoft/universal-router) - A simple middleware-style router for isomorphic JavaScript web apps. 856 | - [wouter](https://github.com/molefrog/wouter) - A minimalist-friendly ~1.3KB routing library. Nothing else but hooks. 857 | - [tanstack-router](https://github.com/TanStack/router) - Type-safe router with built-in caching & URL state management 858 | 859 | ### Props from server 860 | 861 | _Component properties asynchronously fetched over the network_ 862 | 863 | - [react-refetch](https://github.com/heroku/react-refetch) - A simple, declarative, and composable way to fetch data for React components. 864 | - [redux-connect](https://github.com/makeomatic/redux-connect) - Provides decorator for resolving async props in react-router. 865 | - [axios-react](https://github.com/soroushchehresa/axios-react) - HTTP client component for React. 866 | 867 | ### Communication with server 868 | 869 | - [apollo-client](https://github.com/apollostack/apollo-client) - A simple caching client for any GraphQL server and UI framework. 870 | - [react-relay](https://github.com/facebook/relay) - Relay is a JavaScript framework for building data-driven React applications. 871 | - [query](https://github.com/TanStack/query) - [docs](https://tanstack.com/query/v4) Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue. 872 | 873 | ### CSS / Style 874 | 875 | - [aesthetic](https://github.com/milesj/aesthetic) - A powerful type-safe, framework agnostic, CSS-in-JS library for styling components, whether it be plain objects, importing stylesheets, or simply referencing external class names. 876 | - [aphrodite](https://github.com/Khan/aphrodite) - It's inline styles, but they work!. 877 | - [inline-style-prefixer](https://github.com/rofrischmann/inline-style-prefixer) - Run-time Autoprefixer for Inline Style Objects. 878 | - [react-container-query](https://github.com/d6u/react-container-query) - Modular responsive component. 879 | - [react-responsive](https://github.com/contra/react-responsive) - Media queries in react for responsive design. 880 | - [reactponsive](https://github.com/jmlweb/reactponsive) - Responsive components and hooks. 881 | - [styled-components](https://github.com/styled-components/styled-components) - Visual primitives for the component age. 882 | - [stitches](https://github.com/stitchesjs/stitches) - CSS-in-JS with near-zero runtime, SSR, multi-variant support. 883 | 884 | ### HTML Template 885 | 886 | - [jsx-control-statements](https://github.com/AlexGilleran/jsx-control-statements) - Neater If and For for React JSX. 887 | 888 | ### Isomorphic Apps 889 | 890 | - [hypernova](https://github.com/airbnb/hypernova) - A service for server-side rendering your JavaScript views. 891 | - [isomorphic-style-loader](https://github.com/kriasoft/isomorphic-style-loader) - Isomorphic CSS style loader for Webpack. 892 | - [react-server](https://github.com/redfin/react-server) - React framework with server render for blazing fast page load. 893 | - [rill](https://github.com/rill-js/rill) - Universal web application framework. 894 | - [webpack-isomorphic-tools](https://github.com/halt-hammerzeit/webpack-isomorphic-tools) - Server-side rendering for your Webpack-built applications (e.g. React). 895 | 896 | ### Boilerplate 897 | 898 | _Scaffold / starter kit / Yeoman generator / stack ensemble / seed_ 899 | 900 | - [create-react-app](https://github.com/facebookincubator/create-react-app) - Create React apps with no build configuration. 901 | - [crisp-react](https://github.com/winwiz1/crisp-react) - Express integration in TypeScript with support for multiple SPAs and pitfall avoidance. 902 | - [cra-template-redux-auth-starter](https://github.com/Nilanth/cra-template-redux-auth-starter) - A Redux auth starter boilerplate for CRA. 903 | - [electron-react-boilerplate](https://github.com/chentsulin/electron-react-boilerplate) - Live editing development on desktop app. 904 | - [elegant](https://github.com/elegantframework/elegant-cli) - [docs](https://www.elegantframework.com/docs/installation) - [demo](https://www.elegantframework.com/) - A simple React framework for rapidly building beautiful and expressive web applications with Next.js, Tailwind CSS, and Markdown loading. 905 | - [extensive-react-boilerplate](https://github.com/brocoders/extensive-react-boilerplate) - Boilerplate with Next.js, Auth (Sign in, Sign up, Reset password, Confirm email, Refresh Token), Material UI, React Hook Form, I18N, File uploads (support local and Amazon S3 drivers), Tests, CI. 906 | - [generator-starhackit](https://github.com/FredericHeem/starhackit) - Full-stack starter kit. 907 | - [nwb](https://github.com/insin/nwb) - CLI tool and devDependency for React apps & components and npm modules. 908 | - [nx](https://nx.dev) - Next generation build system with first class monorepo support and powerful integrations. 909 | - [PBandJ](https://github.com/moishinetzer/pbandj) - Zero-Config Reusable Component Framework. 910 | - [react-hot-boilerplate](https://github.com/gaearon/react-hot-boilerplate) - Minimal live-editing boilerplate for your next ReactJS project. 911 | - [rockpack](https://github.com/AlexSergey/rockpack) - Simple solution for creating React application with SSR, bundling, linting, testing within 5 minutes. 912 | - [create-react-dependency](https://github.com/andrelmlins/create-react-dependency) - Create react dependencies with no build configuration. 913 | - [phoenix](https://github.com/Sazito/phoenix) - A simple boilerplate that helps you make your react application with Server Side Rendering & Localization support. 914 | - [react-enterprise-starter-kit](https://github.com/anandgupta193/react-enterprise-starter-kit) - Highly Scalable and Performant Awesome React Starter Kit for an enterprise application with a very easy maintainable codebase. 915 | 916 | ### Miscellaneous 917 | 918 | - [react-inlinesvg](https://github.com/matthewwithanm/react-inlinesvg) - An SVG loader component for ReactJS. 919 | - [react-godfather](https://github.com/kapolos/react-godfather) - A new way to write Functional Components, without Hooks. 920 | - [redux-auth-patch](https://github.com/lynndylanhurley/redux-auth) - Complete token authentication system for react + redux that supports isomorphic rendering. 921 | - [redux-search](https://github.com/treasure-data/redux-search) - Redux bindings for client-side search. 922 | - [tcomb-react](https://github.com/gcanti/tcomb-react) - Alternative syntax for PropTypes. 923 | - [react-universal-hooks](https://github.com/salvoravida/react-universal-hooks) - :tada: support react hooks everywhere (Functional or Class Component). 924 | 925 | ## Utilities 926 | 927 | **[`Back to top ⬆️`](#table-of-contents)** 928 | 929 | - [qrcode.react](https://github.com/zpao/qrcode.react) - A <QRCode/> component for use with React. 930 | - [`<qr-code>`](https://github.com/bitjson/qr-code) – A no-dependencies, customizable, animate-able, SVG-based `<qr-code>` element. 931 | - [react-children-utilities](https://github.com/fernandopasik/react-children-utilities) - Extended utils for React.Children. 932 | - [react-media](https://github.com/ReactTraining/react-media) - A CSS media query component for React. 933 | - [react-middle-ellipsis](https://github.com/bluepeter/react-middle-ellipsis) - [demo](https://bluepeter.github.io/react-middle-ellipsis/) - Truncate long strings in the middle instead of the end. 934 | - [react-translate-component](https://github.com/martinandert/react-translate-component) - Multi-lingual/localized text content. 935 | 936 | ### i18n 937 | 938 | _Internationalization / L10n / localization / translation_ 939 | 940 | - [react-i18next](https://github.com/i18next/react-i18next) - Internationalization for react done right. Using the i18next i18n ecosystem. 941 | - [react-intl](https://github.com/yahoo/react-intl) - Internationalize React apps. 942 | - [react-localized](https://github.com/fakundo/react-localized) - Internationalization for React components based on `gettext` format. 943 | - [react-translate-maker](https://github.com/CherryProjects/react-translate-maker) - Universal internationalization (i18n) open source library for React. 944 | - [react-intl-universal](https://github.com/alibaba/react-intl-universal) - [demo](https://g.alicdn.com/alishu/common/0.0.95/intl-example/index.html) Internationalize React apps. Not only for React.Component but also for Vanilla JS. 945 | - [@tolgee/react](https://github.com/tolgee/tolgee-js/tree/main/packages/react) - [docs](https://tolgee.io/docs/web/using_with_react/installation) – Web-based localization tool enabling users to translate directly in the React app they develop 946 | - [js-lingui](https://github.com/lingui/js-lingui) - [docs](https://lingui.js.org) – A readable, automated, and optimized (5 kb) internationalization for JavaScript. 947 | 948 | ### Framework bindings / integrations 949 | 950 | - [backbone-react-component](https://github.com/magalhas/backbone-react-component) - A bit of nifty glue that automatically plugs your Backbone models. 951 | - [elm-react-component](https://github.com/KtorZ/elm-react-component) - A React component which wraps an Elm module to be used in a React application. 952 | - [gl-react](https://github.com/ProjectSeptemberInc/gl-react) - OpenGL / WebGL bindings for React to implement complex effects over images and content. 953 | - [react-backbone](https://github.com/jhudson8/react-backbone) - Backbone-aware mixins for react and a whole lot more. 954 | - [react-d3-library](https://github.com/react-d3-library/react-d3-library) - Open source library for using D3 in React. 955 | - [react-elm-components](https://github.com/evancz/react-elm-components) - Write React components in Elm. 956 | - [react-famous](https://github.com/pilwon/react-famous) - React bridge to Famo.us. 957 | - [react-localstorage](https://github.com/STRML/react-localstorage) - Simple componentized localstorage implementation for Facebook's React. 958 | - [react-lottie-player](https://github.com/mifi/react-lottie-player) - [demo](https://mifi.github.io/react-lottie-player/) - Declarative lottie animation player. 959 | - [react-on-rails](https://github.com/shakacode/react_on_rails) - Integration of React + Webpack + Rails to build Universal (Isomorphic) Apps. 960 | - [react-three-renderer](https://github.com/toxicFork/react-three-renderer) - Render into a three.js canvas using React. 961 | - [react-threejs](https://github.com/fritx/react-threejs) - Simplest bindings between React & Three.js 962 | - [reactfire](https://github.com/firebase/reactfire) - ReactJS mixin for easy Firebase integration. 963 | - [reactive-elements](https://github.com/PixelsCommander/ReactiveElements) - Allows to use React.js component as HTML element (web component). 964 | - [react-unity-webgl](https://github.com/elraccoone/react-unity-webgl) - Unity intergration with two-way communication using a built-in Event System. 965 | 966 | ### Integrations with Third Party Services 967 | 968 | - [react-ga](https://github.com/react-ga/react-ga) - React Google Analytics Module. 969 | - [react-google-analytics](https://github.com/hzdg/react-google-analytics) - Google analytics component. 970 | - [react-google-autocomplete](https://github.com/ErrorPro/react-google-autocomplete) - Google Places API components and hooks. 971 | - [react-recaptcha](https://github.com/appleboy/react-recaptcha) - A react.js reCAPTCHA for Google. 972 | - [react-stripe-checkout](https://github.com/azmenak/react-stripe-checkout) - Load stripe's checkout.js as a react component. Easiest way to use checkout with React. 973 | - [redux-segment](https://github.com/rangle/redux-segment) - Segment.io analytics integration for redux. 974 | - [react-slack-notification](https://github.com/Nilanth/react-slack-notification) - Send messages and error logs to a Slack channel directly. 975 | - [react-firebase-hooks](https://github.com/csfrequency/react-firebase-hooks) - Hooks to integrate firebase in your application. 976 | 977 | ## Performance 978 | 979 | **[`Back to top ⬆️`](#table-of-contents)** 980 | 981 | ### UI 982 | 983 | - [inferno](https://github.com/trueadm/inferno) - An extremely fast, React-like JavaScript library for building modern user interfaces. 984 | - [react-fastclick](https://github.com/JakeSidSmith/react-fastclick) - Fast Touch Events for React. 985 | - [react-static-container](https://github.com/reactjs/react-static-container) - Renders static content efficiently. 986 | 987 | #### Inspect 988 | 989 | - [react-perf-tool](https://github.com/RamonGebben/react-perf-tool) - Debug performance of your React application. 990 | - [react-render-visualizer](https://github.com/redsunsoft/react-render-visualizer) - Render visualizer for ReactJS. 991 | 992 | #### Lazy Load 993 | 994 | - [react-infinite-grid](https://github.com/ggordan/react-infinite-grid) - A React component which renders a grid of elements. 995 | - [react-infinite](https://github.com/seatgeek/react-infinite) - A browser-ready efficient scrolling container based on UITableView. 996 | - [react-lazy-load](https://github.com/loktar00/react-lazy-load) - React component that renders children elements when they enter the viewport. 997 | - [react-lazyload](https://github.com/jasonslyvia/react-lazyload) - Lazyload your Component, Image or anything matters the performance. 998 | - [react-virtualized](https://github.com/bvaughn/react-virtualized) - React components for efficiently rendering large lists and tabular data. 999 | 1000 | ### App Size 1001 | 1002 | - [babel-plugin-transform-react-remove-prop-types](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types) - Remove unnecessary React propTypes. 1003 | - [react-lite](https://github.com/Lucifier129/react-lite) - An implementation of React that optimizes for small script size. 1004 | 1005 | ### Server-Side Rendering 1006 | 1007 | - [iSSR](https://github.com/AlexSergey/issr) - The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State. 1008 | - [react-esi](https://github.com/dunglas/react-esi) - A library to boost SSR performance by exposing React components as Edge Side Includes (ESI) fragments 1009 | 1010 | ## Dev Tools 1011 | 1012 | **[`Back to top ⬆️`](#table-of-contents)** 1013 | 1014 | ### Test 1015 | 1016 | - [chai-enzyme](https://github.com/producthunt/chai-enzyme) - Chai.js assertions and convenience functions for testing React Components with enzyme. 1017 | - [enzyme](https://github.com/airbnb/enzyme) - JavaScript Testing utilities for React. 1018 | - [jest-cli](https://github.com/facebook/jest) - Painless JavaScript Testing. 1019 | - [react-unit](https://github.com/pzavolinsky/react-unit) - Lightweight unit test library for ReactJS. 1020 | - [redux-test-recorder](https://github.com/conorhastings/redux-test-recorder) - A redux middleware to automatically generate tests for reducers through ui interaction. 1021 | - [rut](https://github.com/milesj/rut) - React testing made easy with `react-test-renderer`. Supports DOM and custom renderers. 1022 | - [unexpected-react](https://github.com/bruderstein/unexpected-react) - Plugin for unexpected to enable testing the full React virtual DOM, and also the shallow renderer. 1023 | - [playwright](https://github.com/microsoft/playwright) enables reliable end-to-end testing for modern web apps. 1024 | 1025 | 1026 | ### Redux 1027 | 1028 | - [redux-devtools-chart-monitor](https://github.com/romseguy/redux-devtools-chart-monitor) - A chart monitor for Redux DevTools. 1029 | - [redux-devtools-dock-monitor](https://github.com/gaearon/redux-devtools-dock-monitor) - A resizable and movable dock for Redux DevTools monitors. 1030 | - [redux-devtools-filterable-log-monitor](https://github.com/bvaughn/redux-devtools-filterable-log-monitor) - Filterable tree view monitor for Redux DevTools. 1031 | - [redux-devtools-inspector](https://github.com/alexkuz/redux-devtools-inspector) - Another Redux DevTools Monitor. 1032 | - [redux-devtools-log-monitor](https://github.com/gaearon/redux-devtools-log-monitor) - The default monitor for Redux DevTools with a tree view. 1033 | - [redux-devtools](https://github.com/gaearon/redux-devtools) - DevTools for Redux with hot reloading, action replay, and customizable UI. 1034 | - [remote-redux-devtools](https://github.com/zalmoxisus/remote-redux-devtools) - Redux DevTools remotely. 1035 | 1036 | ### Inspect 1037 | 1038 | - [fluxguard](https://fluxguard.com) - PROD change monitoring that highlights all DOM + design changes. 1039 | - [react-inspector](https://github.com/xyc/react-inspector) - Power of Browser DevTools inspectors right inside your React app. 1040 | - [react-json-inspector](https://github.com/Lapple/react-json-inspector) - React JSON inspector component. 1041 | - [reactotron](https://github.com/reactotron/reactotron) - A CLI and OS X app for inspecting your React JS and React Native apps. 1042 | 1043 | ### Miscellaneous 1044 | 1045 | - [component-controls](https://github.com/ccontrols/component-controls) - [demo](https://component-controls.com) - [docs](https://component-controls.com/tutorial) - A next-generation tool to create blazing-fast documentation sites. 1046 | - [cosmos-js](https://github.com/skidding/cosmos) - DX tool for designing truly encapsulated React components. 1047 | - [react-demo-tab-cli](https://github.com/mkosir/react-demo-tab-cli) - CLI tool for creating demos of react components. 1048 | - [react-styleguidist](https://github.com/sapegin/react-styleguidist) - React style guide generator. 1049 | - [standard-react](https://github.com/feross/standard) - JavaScript Standard Style Guide. 1050 | - [Plasmic](https://www.plasmic.app/) - Powerful design tool for building your React components visually. 1051 | - [SimpleLocalize](https://github.com/simplelocalize/simplelocalize-cli) - Open source CLI tool for finding i18n keys in React projects. 1052 | - [react-device-frameset](https://github.com/zheeeng/react-device-frameset) - React device frameset component. 1053 | 1054 | ## Miscellaneous 1055 | 1056 | **[`Back to top ⬆️`](#table-of-contents)** 1057 | 1058 | - [DataFormsJS JSX Loader](https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.md) - Small JavaScript Compiler for quickly converting JSX to JS directly on a web page. 1059 | - [html-to-react-components](https://github.com/roman01la/html-to-react-components) - Extract annotated portions of HTML into React components as separate modules. 1060 | - [htmltojsx](https://github.com/reactjs/react-magic) - Automatically AJAXify plain HTML with the power of React. It's magic!. 1061 | - [jsonx](https://github.com/repetere/jsonx) - React JSON Syntax. 1062 | - [mozaik](https://github.com/plouc/mozaik) - Mozaïk is a tool based on nodejs / react / d3 / stylus to easily craft beautiful dashboards. 1063 | - [react-blessed](https://github.com/Yomguithereal/react-blessed) - A react renderer for blessed. 1064 | - [jsondiffpatch-react](https://github.com/bluepeter/jsondiffpatch-react) - JSON diffing. 1065 | - [iron-session](https://github.com/vvo/iron-session) - Secure, stateless, and cookie-based session library. 1066 | 1067 | ### Static Website Generator 1068 | 1069 | - [gatsby](https://github.com/gatsbyjs/gatsby) - Transform plain text into dynamic blogs and websites using React.js. 1070 | 1071 | ## Cloud Solutions 1072 | 1073 | **[`Back to top ⬆️`](#table-of-contents)** 1074 | 1075 | ### Databases 1076 | 1077 | - [BCMS](https://github.com/bcms/cms) - API-based, open-source, self-hostable content management system for Gatsby, Nuxt and Next. 1078 | - [crisp-bigquery](https://github.com/winwiz1/crisp-bigquery) - Full stack Google BigQuery with Express in TypeScript. 1079 | - [react-server-routing-example](https://github.com/mhart/react-server-routing-example) - Universal client/server routing and data with AWS DynamoDB. 1080 | -------------------------------------------------------------------------------- /code-of-conduct.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, gender identity and expression, level of experience, 9 | nationality, personal appearance, race, religion, or sexual identity and 10 | orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at 59 | github.com/awesome-react-components/code-of-conduct@brillout.com. All 60 | complaints will be reviewed and investigated and will result in a response that 61 | is deemed necessary and appropriate to the circumstances. The project team is 62 | obligated to maintain confidentiality with regard to the reporter of an incident. 63 | Further details of specific enforcement policies may be posted separately. 64 | 65 | Project maintainers who do not follow or enforce the Code of Conduct in good 66 | faith may face temporary or permanent repercussions as determined by other 67 | members of the project's leadership. 68 | 69 | ## Attribution 70 | 71 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 72 | available at [http://contributor-covenant.org/version/1/4][version] 73 | 74 | [homepage]: http://contributor-covenant.org 75 | [version]: http://contributor-covenant.org/version/1/4/ 76 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | CC0 1.0 Universal 2 | 3 | Statement of Purpose 4 | 5 | The laws of most jurisdictions throughout the world automatically confer 6 | exclusive Copyright and Related Rights (defined below) upon the creator and 7 | subsequent owner(s) (each and all, an "owner") of an original work of 8 | authorship and/or a database (each, a "Work"). 9 | 10 | Certain owners wish to permanently relinquish those rights to a Work for the 11 | purpose of contributing to a commons of creative, cultural and scientific 12 | works ("Commons") that the public can reliably and without fear of later 13 | claims of infringement build upon, modify, incorporate in other works, reuse 14 | and redistribute as freely as possible in any form whatsoever and for any 15 | purposes, including without limitation commercial purposes. These owners may 16 | contribute to the Commons to promote the ideal of a free culture and the 17 | further production of creative, cultural and scientific works, or to gain 18 | reputation or greater distribution for their Work in part through the use and 19 | efforts of others. 20 | 21 | For these and/or other purposes and motivations, and without any expectation 22 | of additional consideration or compensation, the person associating CC0 with a 23 | Work (the "Affirmer"), to the extent that he or she is an owner of Copyright 24 | and Related Rights in the Work, voluntarily elects to apply CC0 to the Work 25 | and publicly distribute the Work under its terms, with knowledge of his or her 26 | Copyright and Related Rights in the Work and the meaning and intended legal 27 | effect of CC0 on those rights. 28 | 29 | 1. Copyright and Related Rights. A Work made available under CC0 may be 30 | protected by copyright and related or neighboring rights ("Copyright and 31 | Related Rights"). Copyright and Related Rights include, but are not limited 32 | to, the following: 33 | 34 | i. the right to reproduce, adapt, distribute, perform, display, communicate, 35 | and translate a Work; 36 | 37 | ii. moral rights retained by the original author(s) and/or performer(s); 38 | 39 | iii. publicity and privacy rights pertaining to a person's image or likeness 40 | depicted in a Work; 41 | 42 | iv. rights protecting against unfair competition in regards to a Work, 43 | subject to the limitations in paragraph 4(a), below; 44 | 45 | v. rights protecting the extraction, dissemination, use and reuse of data in 46 | a Work; 47 | 48 | vi. database rights (such as those arising under Directive 96/9/EC of the 49 | European Parliament and of the Council of 11 March 1996 on the legal 50 | protection of databases, and under any national implementation thereof, 51 | including any amended or successor version of such directive); and 52 | 53 | vii. other similar, equivalent or corresponding rights throughout the world 54 | based on applicable law or treaty, and any national implementations thereof. 55 | 56 | 2. Waiver. To the greatest extent permitted by, but not in contravention of, 57 | applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and 58 | unconditionally waives, abandons, and surrenders all of Affirmer's Copyright 59 | and Related Rights and associated claims and causes of action, whether now 60 | known or unknown (including existing as well as future claims and causes of 61 | action), in the Work (i) in all territories worldwide, (ii) for the maximum 62 | duration provided by applicable law or treaty (including future time 63 | extensions), (iii) in any current or future medium and for any number of 64 | copies, and (iv) for any purpose whatsoever, including without limitation 65 | commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes 66 | the Waiver for the benefit of each member of the public at large and to the 67 | detriment of Affirmer's heirs and successors, fully intending that such Waiver 68 | shall not be subject to revocation, rescission, cancellation, termination, or 69 | any other legal or equitable action to disrupt the quiet enjoyment of the Work 70 | by the public as contemplated by Affirmer's express Statement of Purpose. 71 | 72 | 3. Public License Fallback. Should any part of the Waiver for any reason be 73 | judged legally invalid or ineffective under applicable law, then the Waiver 74 | shall be preserved to the maximum extent permitted taking into account 75 | Affirmer's express Statement of Purpose. In addition, to the extent the Waiver 76 | is so judged Affirmer hereby grants to each affected person a royalty-free, 77 | non transferable, non sublicensable, non exclusive, irrevocable and 78 | unconditional license to exercise Affirmer's Copyright and Related Rights in 79 | the Work (i) in all territories worldwide, (ii) for the maximum duration 80 | provided by applicable law or treaty (including future time extensions), (iii) 81 | in any current or future medium and for any number of copies, and (iv) for any 82 | purpose whatsoever, including without limitation commercial, advertising or 83 | promotional purposes (the "License"). The License shall be deemed effective as 84 | of the date CC0 was applied by Affirmer to the Work. Should any part of the 85 | License for any reason be judged legally invalid or ineffective under 86 | applicable law, such partial invalidity or ineffectiveness shall not 87 | invalidate the remainder of the License, and in such case Affirmer hereby 88 | affirms that he or she will not (i) exercise any of his or her remaining 89 | Copyright and Related Rights in the Work or (ii) assert any associated claims 90 | and causes of action with respect to the Work, in either case contrary to 91 | Affirmer's express Statement of Purpose. 92 | 93 | 4. Limitations and Disclaimers. 94 | 95 | a. No trademark or patent rights held by Affirmer are waived, abandoned, 96 | surrendered, licensed or otherwise affected by this document. 97 | 98 | b. Affirmer offers the Work as-is and makes no representations or warranties 99 | of any kind concerning the Work, express, implied, statutory or otherwise, 100 | including without limitation warranties of title, merchantability, fitness 101 | for a particular purpose, non infringement, or the absence of latent or 102 | other defects, accuracy, or the present or absence of errors, whether or not 103 | discoverable, all to the greatest extent permissible under applicable law. 104 | 105 | c. Affirmer disclaims responsibility for clearing rights of other persons 106 | that may apply to the Work or any use thereof, including without limitation 107 | any person's Copyright and Related Rights in the Work. Further, Affirmer 108 | disclaims responsibility for obtaining any necessary consents, permissions 109 | or other rights required for any use of the Work. 110 | 111 | d. Affirmer understands and acknowledges that Creative Commons is not a 112 | party to this document and has no duty or obligation with respect to this 113 | CC0 or use of the Work. 114 | 115 | For more information, please see 116 | <http://creativecommons.org/publicdomain/zero/1.0/> 117 | --------------------------------------------------------------------------------