ReactJS version of the original AdminLTE dashboard - consists of widgets, charts and other components

Last update: Aug 4, 2022

ReactJS-AdminLTE

Maintenance

ReactJS version of the original AdminLTE dashboard - https://github.com/almasaeed2010/AdminLTE. This project consists of widgets, charts and other components written in ReactJS. Stylesheets are borrowed from the AdminLTE project.


Update

Thank you kindly for the and forks. When I first started working on this project in 2015, I had just graduated from college and had no prior exposure to web-development or open source. I was very new to the open-source world, and did not fully grasp the challenges in maintaining an open-source project sustainably.

For few months while I was working in a fast-paced startup, I moved my focus away from ReactJS to focus on other technologies. But by the time I once again tried to resume work on this project, the ReactJS core library, tooling and ecosystem had changed so rapidly that this repository practically needed a rewrite from scratch. As evident from the number of issues that users kept raising - the project was rendered unusable in the later versions of React.

Without financial support, it was overwhelming to fix these issues, not to mention that I felt like an absolute imposter. With a heavy heart 💔 , I decided to archive this project, and as-of-today, this is where it stands.

Back in 2015, ready-to-use React component libraries were somewhat unknown, and this was one of my very early attempts at creating one. Today, there are several excellent projects that are actively maintained, and they are backed by corporate sponsorship. Here are just a few:

So my fellow hipster, you're much better off using one of those than this one. This repo might just be of historical academic interest to you, but try not to use this one in a real project.

I take comfort knowing that this has been quite the learning experience, and since then I have been educating myself on open-source sustainability. 🔥 Today I have other projects that I now actively maintain, that could really use your and support. Please visit my profile and check out my pinned repositories for the same. Thank you 🙏🏼


Project documentation

If you use React in your app, you might find some of these components useful!

View the complete list of available components

Some available components in React:

Widgets will use velocity.js animations instead of the originally used JQuery animations wherever possible, for improved performance across all browsers and devices.

ReactJS Dashboard

Will soon be populated with charts.

More stuff coming soon. Stay tuned!

Instructions of Usage :

  • Run npm install adminlte-reactjs
  • Include the stylesheets for the components, similar to the widgets page
  • Include the library var reactjsAdminlte = require('adminlte-reactjs'). You may prefer the AMD style or the import statement.
  • You can now begin using the components like this var ProfileCard = reactjsAdminlte.ProfileCard.
  • If you don't need all the components, then you can choose to include only specific ones rather than the entire library. This can reduce your JS bundle size significantly var StatTile = require('adminlte-reactjs/src/components/stat-tile')

Contributing guidelines :

Due to several work related commitments, the development rate is a little slow and I apologize for that. However, I'm looking for awesome folks 🤘 who could contribute and help me maintain this project.

Where can you contribute? (starting from easy to relatively challenging)

  • Covering documentation for all the available components and how to use them (this is the easiest one, but quite important!)
  • Converting existing components into ES6/ECMAScript 2016
  • Writing tests for components. Similar to tests written in the React-Bootstrap project.
  • Reactifying the rest of the widgets, elements and pages from AdminLTE. Here are the steps to do this:

Step 1 :

  • Fork or clone this repo. Alternatively - if you have NPM installed, you can also do npm install adminlte-reactjs.
  • Install nodejs and NPM
  • Go to the project's root folder from your terminal and run npm install
  • Run npm run dev
  • Going to http://localhost:8000 will render an empty dashboard skeleton in the client-side using ReactJS. Clicking on one of the dashboard options on the left pane displays the original dashboards from AdminLTE.
  • Go to http://localhost:8000/widgets.html to see available widgets in ReactJS.
  • Use React Developer Tools Chrome Extension to understand the components hierarchy and structure and to track down bugs.

Step 2:

  • Pick a page from the AdminLTE project to reactify it, or some widget that hasn't been reactified yet.
  • If the page for it doesn't exist in the repo, create one for it in the views folder, and render the page by defining a route for it inside routes.js.
  • Create the entry point that renders the components inside /src/pages folder. Now you can begin writing your components and testing them!
  • To view and test your components on the page, add your entry point in webpack.config.js. Run webpack -p to generate the bundle for the page, and include the bundle and associated vendors for it in the page using script tags.
  • webpack-dev-server along with React Hot Loader can be used to ease your development workflow. This can be done by installing dev dependencies from package.json file. If you haven't, then run npm install webpack-dev-server and npm install react-hot-loader. Then in your HTML, change your javascript bundles' source paths to point to the webpack-dev-server proxy in your script tags. So if you have these bundles for example,
">
<script src="/dist/js/vendors.js">script>
<script src="/dist/js/app.bundle.js">script>

change this to

">
<script src="http://localhost:8080/dist/js/vendors.js">script>
<script src="http://localhost:8080/dist/js/app.bundle.js">script>

Then you can run webpack-dev-server --hot --inline just once - and every time you make any edits to your code and save it, the server will automatically create bundles and update the changes in the browser. This is highly recommended instead of running webpack -p every time you make some edit in your code. You can later change the script tags back once you stop webpack-dev-server.

For a detailed explanation on setting up a workflow using Webpack, check out my blog post - Webpack for The Fast and The Furious 🚔

This is still a work in progress and will get better over time.

Step 3: Including your new components in the library

After you've finished writing a component and testing it out, you can include it in the library.

  • Place/move your component inside the /src/components folder and include it inside widgets.src.js.
  • Run npm build to generate the library reactjsAdminlte.js. Your component will be included in the library!
  • To make sure that your component works correctly, test it out by including it in the page using the library.

Some tips before making a pull request

  • Make sure that you've pulled the latest commits into your fork.
  • Create a branch for your edits - that way the project maintainer can safely pull your code and test it out.
  • If it's your first P.R, it'll be easier if you begin with something small first instead of making huge changes in lots of files. It helps me understand what the P.R is about, and I could help you out with the rest of changes if needed. It'll also save you from spending lot of effort in doing something that might not be necessary.
  • An important thing to remember is to have a P.R that fixes one issue at a time, and not make changes to lot of files in the same P.R. This way it's easier to test the changes out and have a relatively clean commit log.
  • You can learn more about these tips in detail here
If you have any further queries that you may have on how to contribute, or you have just general questions about how to use the components in your app - feel free to shoot an email. I'll help you out! 😸

GitHub

https://github.com/booleanhunter/ReactJS-AdminLTE
Comments
  • 1. webpack-dev-server + hot loader

    Great work man! just to know there are some missing lib (like webpack-raphael) when you try to run it with webpack-dev-server + hot loader.

    then i cannot make it work correctly because when i run webpack-dev-server --hot --inline and i open http://localhost:8080/ the result is this:

    Image of result

    every html inside view i changed the path to contain correctly http://localhost:8080 what i'm doing wrong?

    Reviewed by paomosca at 2016-07-12 21:04
  • 2. Charts

    Hi,

    nice creation you have made there. I am looking for a reach driven dashboard, and i found yours! Just wonder hows the chart support in your creation? as I dont see any chart in the demo site and clicking in to the "chart" menu item give me a deadline :(

    Thanks!

    Reviewed by DaFrik at 2016-06-21 01:22
  • 3. Cannot GET /documentation/index.html

    Hi,

    It seems the document page can't be reached via 'http://localhost:8000/documentation/index.html'. Is there any other way to find some documents about how to use?

    Thanks, Ted

    Reviewed by gewentao at 2016-09-05 07:13
  • 4. Code Organization

    This blog post talks about a good way to organize React code such as components and containers which could make the code base extremely modular - https://medium.com/@alexmngn/how-to-better-organize-your-react-applications-2fd3ea1920f1#.wgs3s0qen

    The code base currently has duplicates existing in few places. These duplicates along with other boilerplate could be eliminated by following the guidelines mentioned in the blog.

    Reviewed by booleanhunter at 2016-04-28 07:21
  • 5. Added package-lock, fix package.json, move many packages to "devDependencies"

    Packages intended for development purposes should be part of "devDependencies".

    I did this change due to installation problems with the package 'bower' that is deprecated. Although it does seem that is not used.

    Reviewed by siavelis at 2017-12-22 15:40
  • 6. I have no css being loaded with it?

    What am I doing wrong here? I can see the text output of the InfoTile but I there's no CSS attached to it? Heres my component:

    import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';
    import {InfoTile} from 'adminlte-reactjs';
    
    class App extends Component {
      render() {
        return (
          <div className="App">
            <div className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h2>Welcome to React</h2>
            </div>
            <p className="App-intro">
              To get started, edit <code>src/App.js</code> and save to reload.
            </p>
            <InfoTile  
                width = '3'
                content = '' 
                icon = 'fa-envelope-o' 
                stats = '1,415' 
                subject = 'Messages' 
                theme = 'bg-aqua' 
            />
          </div>
        );
      }
    }
    
    export default App;
    

    And heres my index.html:

    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="theme-color" content="#000000">
        <!--
          manifest.json provides metadata used when your web app is added to the
          homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
        -->
        <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
        <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
        <!--
          Notice the use of %PUBLIC_URL% in the tags above.
          It will be replaced with the URL of the `public` folder during the build.
          Only files inside the `public` folder can be referenced from the HTML.
    
          Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
          work correctly both with client-side routing and a non-root public URL.
          Learn how to configure a non-root public URL by running `npm run build`.
        -->
        <title>React App</title>
      </head>
      <body>
        <noscript>
          You need to enable JavaScript to run this app.
        </noscript>
        <div id="root"></div>
        <!--
          This HTML file is a template.
          If you open it directly in the browser, you will see an empty page.
    
          You can add webfonts, meta tags, or analytics to this file.
          The build step will place the bundled scripts into the <body> tag.
    
          To begin the development, run `npm start` or `yarn start`.
          To create a production bundle, use `npm run build` or `yarn build`.
        -->
      </body>
    </html>
    
    
    Reviewed by hipkiss91 at 2017-08-05 21:18
  • 7. Using separate prop values instead of object

    Currently, props get passed to components as an object, rather than separate values.

    var infoTileOptions = {
        theme: 'bg-aqua',
        icon: 'fa-envelope-o',
        subject: 'Messages',
        stats: '1,410',
        content: '' 
    };
    <InfoTile options = {infoTileOptions} />
    

    This approach makes validating props difficult using React.PropTypes. One way of validating them would be by using React.PropTypes.shape, but this would again get more difficult with deeply nested objects.

    A (potentially) better approach -

    <InfoTile 
        theme='bg-aqua' 
        icon='fa-envelope-o' 
        subject='Messages' 
        stats='1,410',  
        content='' 
    />
    
    Reviewed by booleanhunter at 2015-11-14 02:16
  • 8. Could not find a declaration file for module 'adminlte-reactjs'.

    project is based on typescript step-1 npm install adminlte-reactjs step-2 import { InfoTile } from "adminlte-reactjs";

    expected result - able to use InfoTile component

    actual result Could not find a declaration file for module 'adminlte-reactjs'. '/home/[email protected]/projects/reactJS/zymrIntranet/node_modules/adminlte-reactjs/reactjsAdminlte.js' implicitly has an 'any' type. Try npm install @types/adminlte-reactjs if it exists or add a new declaration (.d.ts) file containing `declare module 'adminlte-reactjs'

    @types/adminlte-reactjs is dosent exist

    Reviewed by pwketankulkarni at 2019-05-30 05:37
  • 9. Module not found: Can't resolve 'react/lib/ReactComponentTreeHook'

    Hey, so...

    I created a new project with: create-react-app example Then installed ReactJS-AdminLTE with: npm install adminlte-reactjs Then, I went into my App.js and imported an InfoTile and used it. This is my code:

    import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';
    import InfoTile from 'adminlte-reactjs';
    
    class App extends Component {
      render() {
        return (
          <div className="App">
            <InfoTile  
               width ={3}
               content = '' 
               icon = 'fa-envelope-o' 
               stats = '1,410' 
               subject = 'Messages' 
               theme = 'bg-aqua' 
          />
          </div>
        );
      }
    }
    
    export default App;
    

    Everything seems fine. However, when I run npm start, I get this: image

    ./node_modules/adminlte-reactjs/node_modules/react-dom/lib/ReactDOMUnknownPropertyHook.js Module not found: Can't resolve 'react/lib/ReactComponentTreeHook' in 'C:\Users\Saulo Joab\Desktop\Random Files\Projetos\React\smarttramo\node_modules\adminlte-reactjs\node_modules\react-dom\lib'

    Did I do something wrong? I tried really hard to solve that error but nothing worked.

    Reviewed by saulojoab at 2019-03-10 09:03
  • 10. webpack doesn't work

    Hi booleanhunter

    I have a problem trying to compile with webpack the stuff

    				throw err;
    				^
    
    Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
        at Object.get [as CommonsChunkPlugin] (/ReactJS-AdminLTE/node_modules/webpack/lib/webpack.js:165:10)
        at Object.<anonymous> (/ReactJS-AdminLTE/webpack.config.js:48:30)
        at Module._compile (/usr/local/lib/node_modules/webpack-cli/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
    
    
    Do you know how to resolve it?
    
    Thanks in advance
    
    Nacho.
    Reviewed by odelreym at 2018-07-05 15:23
  • 12. Dashboard Component README

    This is my first pull request ever so it may not be completely correct. The changes made are primarily to create a new README file for the components specific to the dashboard such as charts and stuff.

    Reviewed by LordFahrenheit at 2018-03-29 07:41
🔥React Dashboard - isomorphic admin dashboard template
🔥React Dashboard - isomorphic admin dashboard template

??React Dashboard - isomorphic admin dashboard template (React.js, Bootstrap, Node.js, GraphQL, React Router, Babel, Webpack, Browsersync) ??

Aug 4, 2022
ReactJS version of Director Responsive Admin Template Free
 ReactJS version of Director Responsive Admin Template Free

ReactJS version of Director Responsive Admin Template Free

Jul 30, 2022
Build React Admin Dashboard with Multiple Themes | React Admin Panel CSS | ReactJS
Build React Admin Dashboard with Multiple Themes | React Admin Panel CSS | ReactJS

Build React Admin Dashboard with Multiple Themes | React Admin Panel CSS | ReactJS

Aug 1, 2022
React Dashboard made with Material UI’s components.

React Dashboard made with Material UI’s components. Our pro template contains features like TypeScript version, authentication system with Firebase and Auth0 plus many other

Aug 8, 2022
React version of Argon Design System
React version of Argon Design System

Argon Design System React Start your development with a Design System for Bootstrap 4, React and Reactstrap. It is open source, free and it features m

Aug 2, 2022
Light Blue React Template - Admin Dashboard Template built with React
Light Blue React Template - Admin Dashboard Template built with React

?? Light Blue React Template Free and open-source admin dashboard template built with React and Bootstrap 4. Developed with ❤️ by Flatlogic. If you lo

Jul 30, 2022
Free admin dashboard template based on Gatsby with @paljs/ui component package
Free admin dashboard template based on Gatsby with @paljs/ui component package

gatsby-admin-template Admin dashboard template based on Gatsby with @paljs/ui component package Setup: git clone https://github.com/paljs/gatsby-admin

Jul 28, 2022
MatX is a full-featured React Material UI Admin Dashboard template
MatX is a full-featured React Material UI Admin Dashboard template

Matx React Material Design Admin Dashboard Template MatX is a full-featured React Material UI Admin Dashboard template. MatX is built with React, Redu

Aug 2, 2022
React Ecommerce dashboard
React Ecommerce dashboard

React Ecommerce dashboard

Jul 20, 2022
React-Crm - React Admin Dashboard with Multiple Themes
React-Crm - React Admin Dashboard with Multiple Themes

React Admin Dashboard with Multiple Themes Build React Admin Dashboard with Mult

Jul 30, 2022
PlainAdmin - Free Bootstrap 5 Dashboard Template
 PlainAdmin - Free Bootstrap 5 Dashboard Template

PlainAdmin is a free and open-source Bootstrap 5 admin and dashboard template that comes with - all essential dashboard components, pages, UI elements, charts, graphs, application pages and more.

Aug 4, 2022
Admin-Dashboard Front End clone made with React JS
Admin-Dashboard Front End clone made with React JS

Admin-Dashboard Front End clone made with React JS H! This a Admin-Dashboard front end clone that i´ve built using ReactJS. You can visit the website

Jul 19, 2022
Landing is a template built by Ant Motion's motion components.
Landing is a template built by Ant Motion's motion components.

Ant Design Landing Landing Pages of Ant Design System English | 简体中文 What is Landing? Landing is a template built by Ant Motion's motion components. I

Aug 5, 2022
Design System for developers build on styled-components & React JS.
Design System for developers build on styled-components & React JS.

Atomize Code UI Design System for React JS Features UI design system for web apps. Elegant and beautiful React components Environment Support Modern b

Aug 5, 2022
Email templates with React components
Email templates with React components

● Build, test, send emails with React Email templates with React components MJML components that work across clients (Outlook!) Preview server with li

Aug 9, 2022
Gatsby-starter-stripemart - A basic and minimal e-commerce store using Gatsby, Stripe, Use-Shopping-Cart and Netlify

?? Gatsby Starter Stripemart Like a supermarket but for Stripe. No ongoing month

Jun 15, 2022
Shards React is a free, beautiful and modern React UI kit based on Shards.
Shards React is a free, beautiful and modern React UI kit based on Shards.

Getting started with Shards React is fairly simple. You can download Shards React via the official website, here on GitHub as a release package or by using a package manager such as Yarn or NPM.

Jul 26, 2022
A clean, beautiful and responsive portfolio template for Developers
 A clean, beautiful and responsive portfolio template for Developers

Gatsby Simplefolio ⚡️ A clean, beautiful and responsive portfolio template for Developers Features ⚡️ Modern UI Design + Reveal Animations ⚡️ One Page

Jul 31, 2022
A lightweight, customizable personal blog template built with GatsbyJS and React

DevBlog DevBlog is a fully customizable blog template designed for developers (or anyone else) wanting to get into blogging. It comes ready to go and

Jul 16, 2022