loading...
Cover image for React Dashboards - Open-Source and Free

React Dashboards - Open-Source and Free

sm0ke profile image Sm0ke Updated on ・11 min read

Hello coder,

If you plan to build your next admin dashboard using React, this list with open-source templates might help you a little bit. All open-source admin panels listed in this article are suitable for hobby and commercial products and are actively supported by the publishers.


For more free admin dashboards please access the AppSeed platform - all starters are actively supported via Discord. Thank you!


Selection criteria

  • Built with React
  • Permissive license: MIT License, Apache License
  • Modern Design
  • The product is actively supported
  • Minimum tooling (gulp, webpack, parcel)

Motivation to write this article

The existing Top 20+ React Dashboards articles, most of them, are written by publishers with this bad habit of sniffing a lot of commercial apps in the content, without mention this aspect in the title.

I’m not saying this is good or bad, but is not obvious if the apps are free or not, just by reading the title. Well, this is not the case here. Let's go!


React Dashboard Black

Theme provider - Creative-Tim

React Dashboard Black is a beautiful Bootstrap 4 (Reactstrap) admin dashboard with a generous number of components built to fit together and look amazing. If you are looking for a tool to manage and visualize data about your business, this dashboard is the thing for you. It combines colors that are easy on the eye, spacious cards, beautiful typography, and graphics.

React Dashboard Black - animated presentation.


Material Dashboard React

Material Dashboard React is a free Material-UI Admin with a fresh, new design inspired by Google's Material Design. We are very excited to introduce our take on the material concepts through an easy to use and beautiful set of components. Material Dashboard React was built over the popular Material-UI v4.1.0 framework.

Material Dashboard React - Free admin dashboard coded in React.


React Dashboard Datta Able

Theme provider - CodedThemes

Datta Able is a Free React Admin Template, around all other admin templates in the market. It comes with high feature-rich pages and components with fully developer-centric code. Before developing Datta Able our key points were performance and design. While developing we have gone through various testing & code optimization processes, for making this performance and design-centric backend application.

Dashboard Links

React Dashboard Datta Able - Free React Admin Panel.


StarAdmin React Free

Theme provider - BootstrapDash

Star Admin React Free template presents unlimited customization options to users. It gives you access to a wide variety of essential elements that will allow you to bring a unique touch to your web application. The template features a carefully crafted dashboard with plenty of neatly arranged and organized components and is capable of making the process of data visualization simpler.

Dashboard Links

Star Admin React Free - Open-Source Admin Panel coded in React.


React Dashboard Argon

Theme provider - Creative-Tim

React Dashboard Argon is an open-source admin dashboard for Bootstrap4 and Reactstrap. React Dashboard Argon is built with over 100 individual components, giving you the freedom of choosing and combining. All components can take variations in color, that you can easily modify using SASS files. Dashboard resources:

Build from sources

$ git clone https://github.com/creativetimofficial/argon-dashboard-react.git
$ cd argon-dashboard-react
$ yarn 
$ yarn start
$ yarn build

React Dashboard Argon - animated presentation.


React Dashboard NowUI

Theme provider - Creative-Tim

React Dashboard NowUI is an admin dashboard template designed by Invision and coded by Creative Tim. It is built on top of Reactstrap, using Now UI Dashboard and it is fully responsive. It comes with a big collection of elements that will offer you multiple possibilities to create the app that best fits your needs. It can be used to create admin panels, project management systems, web applications backend, CMS or CRM.

Dashboard links

React Dashboard Now UI - gif animated intro.

Build from sources

$ git clone https://github.com/creativetimofficial/now-ui-dashboard-react.git
$ cd now-ui-dashboard-react
$ yarn # install modules
$ yarn start # start in development mode
$ yarn build # build for production

React Dashboard Material

Theme provider - Creative-Tim

React Dashboard Material is a free Material-UI Admin with a fresh, new design inspired by Google's Material Design with a beautiful set of components. Material Dashboard React was built over the popular Material-UI v4.1.0 framework.

Dashboard Links

React Dashboard Material - Gif animated intro.

Build from sources

$ git clone https://github.com/creativetimofficial/material-dashboard-react.git
$ cd material-dashboard-react
$ yarn # install modules
$ yarn start # start in development mode
$ yarn build # build for production

Airframe React

Theme provider - Webkom

Airframe Dashboard with a minimalist design and innovative Light UI will let you build an amazing and powerful application with great UI. Perfectly designed for large scale applications, with detailed step by step documentation.

This Airframe project is a typical Webpack based React app, React Router also included together with customized Reacstrap. This project has all of it's few dependencies up to date and it will be updated on a regular basis.

Build Airframe React from sources

$ git https://github.com/0wczar/airframe-react.git
$ cd airframe-react
$ npm install # install modules
$ npm start # start in development mode
$ npm run build:prod #create a production build

Airframe React - Open-Source React Dashboard.


React Dashboard Tabler

Theme provider - CodeCalm

A beautiful and clean UI Kit coded in React and actively supported by Codecalm (funny name)

Dashboard links

React Tabler - Open-Source React dashboards

Build from sources

$ git clone https://github.com/tabler/tabler-react.git
$ cd tabler-react
$ yarn # install modules
$ yarn start # start in development mode


ArchitectUI React Dashboard

Theme provider - ArchitectUI

ArchitectUI React Dashboard template is a free, open-source admin panel coded in React. It comes packed with a set of beautiful elements and components that can offer you a head start in developing your web application. It has a fully responsive layout, multiple color schemes for both Bootstrap elements and layout components. ArchitectUI React is powered by Bootstrap 4, Webpack and it uses create-react-app from Facebook Dev.

React Dashboard Links

ArchitectUI React Dashboard - Free React Admin Panel.

Build from sources

$ git clone https://github.com/DashboardPack/architectui-react-theme-free.git
$ cd architectui-react-theme-free
$ yarn # install modules
$ yarn start # start in development mode
$ yarn build # build for production


React Dashboard Paper

Theme provider - Creative-Tim

Dashboard React Paper is a Bootstrap Admin Panel which combines soft colors with beautiful typography and spacious cards and graphics. It is a powerful tool, but it is light and easy to use. It has enough features to allow you to get the job done, but it is not crowded to the point where you can't find the files for a specific plugin.

Dashboard links

React Dashboard Paper - Gif animated intro.

Build from sources

$ git clone https://github.com/creativetimofficial/paper-dashboard-react.git
$ cd paper-dashboard-react
$ yarn # install modules
$ yarn start # start in development mode
$ yarn build # build for production

React Dashboard Vibe

React Dashboard Vibe - is a beautiful admin dashboard built with Bootstrap4, released under the MIT license.

Build React Dashboard Vibe from sources

$ git clone https://github.com/NiceDash/Vibe.git
$ cd Vibe
$ yarn 
$ yarn start

React Dashboard Vibe - Presentation Screen Shot.


React Material Admin

Theme provider - FlatLogic

React Material Admin is an admin panel template built with Material-UI framework, and coded entirely in React (no jQuery or Bootstrap dependency).
The design is delivered with a few sample pages like the main dashboard page, login, registration, typography, google maps, charts, and a minimum set of UI elements. Dashboard information and resources:

React Dashboard Material Admin - animated presentation.


React Dashboard Light Bootstrap

Theme provider - Creative-Tim

React Dashboard Light Bootstrap is an admin dashboard template, crafted by Creative-Tim. The app is built on top of React Bootstrap and use the existing design of Light Bootstrap Dashboard. Dashboard information:

At first look, the product design is clean and very easy to interact with the page controls. This app has an impressive number of downloads, more than 30k (according to the publisher). Anyone, with a basic Javascript, and React knowledge can build the app from sources.

React Dashboard Light - animated presentation.


React Dashboard Shards Lite

Theme provider - DesignRevision

React Dashboard Shards Lite is a free React admin dashboard template pack featuring a modern design system and lots of custom templates and components, provided by DesignRevision. The design is minimalistic and clean. Dashboard resources:

React Dashboard Shards Lite - animated presentation.


Similar posts, from other publishers


Resources


Thank you!

Posted on by:

sm0ke profile

Sm0ke

@sm0ke

#Automation, my favorite programming language

Discussion

markdown guide
 
 

AntDesign may seem nice, but when it comes to performance, it really sucks.

 

We use antd in production, never had any performance issue. For those searching, Antd is full typescript.

 
 

Looks great, I will publish it, after a smoke test.
Thank you!

 

Unfortunately I choose ArchitectUI for a new project. This template is poorly documented and its file structure is over complex. Now, I am struggling for about a week trying to put the components together in a more simple and logical way. As a comparison, I used the React template from Creative Tim before, and in about one day I had everything ready for development.

 

Hi Oscar,

I am building an AWS Amplify project and was thinking of using a Creative Tim material dashboard.  I have already generated my create react app and started developing.  If I bought a pro dashboard could I just take bits I want and use in my own project, would be great to get some advise as I have never used one of these dashboards before and don't want it to waste time when its supposed to save time, thank you.

Alan

 

Hi Alan,

I would suggest that you try one of the free templates first to ensure that you will be using a significant part of the product. I am saying this because most of the templates out there are composed manly of open source components. The template vendors basically put the components together in a nice and concise way, which is a considerable workload. So if you are planning to use the design part of the template, definitely is a good investment.

I hope this helps you.

Oscar

Thanks Oscar,

That's a good idea actually. I will download the free version and see how I can manage with it.

Thanks a lot for your help!

Alan

 

Indeed, the code structure is super important. If you have the time, try to provide some feedback to the Architect UI team. Maybe you are not the only one with this kind of problems and the next versions might be better.
Regarding Creative Tim, I'm also using their products. They are pretty good.

 

Awesome list! Now lets checkout all those new tabs I have opened. Hope to find one with TypeScript.

 

Hi Arend,

I read your comment about these dashboards sometimes being difficult to implement. That has crossed my mind also, I seen a nice dashboard on creative tim but would like to just take bits of it and add to my project if i buy the pro version. Is this possible or do i have to install the whole thing. I'm not sure that will work for me as i have started a create react app aws amplify project. It would be great to get your thoughts. And why are my replies on dev.to appearing strangely??!!

Alan

 

So, did you find any using Typescript or should I also checked all my newly open tabs? ;-)

 

Haha, I did not find any to my liking. Another thing to note is that these dashboards are often so bloated with features that it takes more time to understand and adapt, then to create your own. It does help to have a basic admin layout template, perhaps get inspired by some of the widgets from this list. But my advise would be to build your own.

This is the feeling I had looking at a few of them.
Is there a basic admin layout template you can recommend to start building my own?

 

Thanks for reading & happy coding!

 

Hi,
I am begin\er with basic knowledge of HTML,CSS and REACT.

Which one of these themes is well documented, as I am beginning to setup my first project using react.
I am trying to make a Factory/Warehouse Information Management System.
I am an Embedded Developer , I wish to add features like real time data logging of sensors and environment.
Can you recommend which theme or platform should be used ?
Also am I right in choosing REACT ?

 

React has a huge community, and is actively supported by Facebook. Is definitely a good choice.

 

Exactly what I was looking for. Thank you! :)