Sm0ke

Posted on Jun 29, 2019 • Edited on Nov 30 • Originally published at dev.to

React Dashboards

#react #dashboards #opensource #webdev

Hello Coders!

If you plan to build your next admin dashboard using React, this list with open-source templates might help you a little bit. All React Dashboards listed in this article are suitable for hobby and commercial products and actively supported by the publishers. For newcomers, React is an open-source, front-end, JavaScript library for building user interfaces or UI components, actively supported by Facebook.

Thanks for reading! - Content provided by App Generator.

Tailwind Dashboard React `free`

This innovative Material Design, Tailwind CSS & React dashboard comes with a beautiful design inspired by Google's Material Design and it will help you create stunning websites & web apps to delight your clients.

👉 Tailwind Dashboard React - product page
👉 Purity UI Dashboard - LIVE Demo

Vision UI React `MUI`

Designed for those who like modern UI elements and beautiful websites. Made of hundreds of elements, designed blocks, and fully coded pages, Vision UI Dashboard React is ready to help you create stunning websites and web apps.

This Free MUI Dashboard comes with prebuilt design blocks, so the development process is seamless, switching from our pages to the real website is very easy to be done.

👉 Vision UI React - product page
👉 Vision UI React - LIVE Demo

Material Dashboard React

Material Dashboard React is the latest free MUI Admin Template based on React released by Creative-Tim. If you’re a developer looking to create an admin dashboard that is developer-friendly, rich with features, and highly customizable, here is your match.

👉 Material Dashboard React - product page
👉 Material Dashboard React - LIVE demo

React Soft Dashboard `full-stack`

Start your Development with an Innovative Admin Template for Material-UI and React. Soft UI Dashboard React is built with over 70 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining. The product comes with a simple JWT authentication flow: login/register/logout.

🚀 Built with React App Generator

✅ Innovative Soft UI Design - Crafted by Creative-Tim
✅ React, Redux, Redux-persist
✅ Authentication: JWT Tokens,
✅ OAuth via GitHub
✅ Full-stack ready using NodeJS, Flask and Django API

React Node Datta Able `Full-Stack`

Datta Able is an open-source React Dashboard that provides a colorful and modern design. Datta Able React Free is the most stylised React Free Admin Template, around all other admin templates in the market. The product comes with a simple JWT authentication flow: login/register/logout.

👉 React Node JS Datta Able - product page
👉 React Node JS Datta Able - LIVE Demo

Purity React Dashboard

Designed for those who like modern UI elements and beautiful websites Purity React Dashboard is made of hundreds of elements, designed blocks, and fully coded pages. Purity UI Dashboard is built with over 70 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining.

👉 Purity React Dashboard - product page
👉 Purity React Dashboard - LIVE Demo

Argon Dashboard Chakra

Start your Development with an Innovative Admin Template for Chakra UI and React. If you like the look & feel of the hottest design trend right now, Argon Dashboard Chakra, you will fall in love with this dashboard! It features a huge number of components built to fit together and look amazing.

👉 Argon Dashboard Chakra - product page
👉 Argon Dashboard Chakra - LIVE Demo

Muse Ant.Design React

Muse Ant Design Dashboard is a free Admin Template based on two popular front-end technologies: Ant Design & React. It was built to simplify the developer's work and is comes with a fresh design inspired by Ant Design. All its components are built to fit perfectly with each other, while aligning to the Ant Design concepts.

👉 Muse Ant.Design React - product page
👉 Muse Ant.Design React - LIVE demo

Flexy React Admin

Flexy React Dashboard Lite is carefully hand crafted minimal admin template, Its build with modular and modern design. Flexy React Dashboard Lite is completely free to download and use for your personal and commercial projects.

👉 Flexy React Admin - product page
🎁 More React Templates crafted by WrapPixel

Corona React Free

For all the dark mode fans out there, here’s the free version of Corona React, a free React admin template from BootstrapDash. This is the new and improved version of Corona React with a new facelift for enhanced legibility and aesthetics!

👉 Corona React Free - product page
👉 Corona React Free - LIVE demo

This beautiful template is designed to be easy on the eyes, ensuring a comfortable viewing experience for all the night-owls out there and super easy to setup.

React Purity Dashboard `fullstack`

Start your Development with an Innovative Admin Template for Chakra UI and React. Purity UI Dashboard is built with over 70 frontend individual elements, like buttons, inputs, navbars, navtabs, cards or alerts, giving you the freedom of choosing and combining.

🚀 Built with React App Generator

✅ Innovative Chakra UI Design - Creafted by Creative-Tim
✅ React, Redux, Redux-persist
✅ Authentication: JWT Login/Register/Logout
✅ Full-stack ready using Node JS API Server (open-source project)
- Features: Typescript / SQLite / TypeORM / Joy (validation) / Passport library - passport-jwt strategy.

Star Admin React

Star Admin React Free is designed to look simple and beautiful and features a huge collection of components and elements, which will offer unlimited options to users. This design gives you access to a wide variety of essential elements that will allow you to bring a unique touch to your web application.

👉 Star Admin React - product page
👉 Star Admin React - LIVE demo

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.

Mantis React Material UI

Mantis is a free and open source React redux dashboard template made using the Material UI React component library with aim of flexibility and better customizability. The product comes with a fully professional grade user interface for any kind of backend project.

👉 Mantis React Material UI - source code
👉 Mantis React Material UI - LIVE demo

Argon Dashboard 2 MUI

Start your Development with an Innovative Admin Template for MUI and React. If you like the look & feel of the hottest design trend right now, Argon, you will fall in love with this dashboard! It features a huge number of components built to fit together and look amazing.

👉 Argon Dashboard 2 MUI - product page
👉 Argon Dashboard 2 MUI - LIVE demo

Dashboard Black `React v18`

React Dashboard Black is a beautiful Bootstrap (Reactstrap) admin dashboard with a generous number of components built to fit together and look amazing.

👉 React Dashboard Black - product page
👉 React Dashboard Black - LIVE demo

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 MaterialPRO Lite

Material React Admin Lite is a carefully handcrafted beautiful react admin dashboard template of 2019. It's built with a modular and modern design concept. Material React Admin Lite is completely free to download and use for your personal as well as commercial projects.

👉 React Material Lite - product page
🎁 More React Templates crafted by WrapPixel

Soft UI Dashboard React

Start your Development with an Innovative Admin Template for MUI and React. If you like the look & feel of the hottest design trend right now, Soft UI, you will fall in love with this dashboard! It features a huge number of components built to fit together and look amazing.

👉 Soft UI Dashboard React - product page
👉 Soft UI Dashboard React - LIVE Demo

React Horizon UI `Full-Stack`

Open-Source Full-Stack seed project crafted on top of Chakra UI and React. The product comes with a simple JWT authentication flow: login/register/logout powered by an open-source Node JS API Backend. Based on the permissive (MIT) Licence, React Horizon UI can be used in commercial projects and eLearning activities.

👉 React Horizon UI - product page
👉 React Horizon UI - LIVE Demo

React Node JS Berry

Berry is a creative free React Dashboard build using the Material-UI by CodedThemes agency. It is meant to be the best User Experience with highly customizable feature-riched pages. It is a complete game-changer React Dashboard Template with easy and intuitive responsive design as on retina screens or laptops. The product comes with a simple JWT authentication flow: login/register/logout.

👉 React Node JS Berry - product page
👉 React Node JS Berry - LIVE Demo

React Argon Chakra UI

Start your Development with an Innovative Admin Template for Chakra UI and React. Argon Dashboard Chakra is built with over 70+ frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining.

👉 React Argon ChakraUI - product page
👉 Argon Dashboard Chakra - LIVE Demo

This open-source Chakra UI Dashboard is coming with prebuilt design blocks, so the development process is seamless, switching from our pages to the real website is very easy to be done.

React Node JS Soft Dashboard

Soft UI Dashboard REACT, a modern Material-UI design crafted by Creative-Tim now configured with a Node JS API Backend.

Soft UI Material-UI React is built with over 70 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining.

👉 React Node JS Soft Dashboard - product page
👉 React Node JS Soft Dashboard - LIVE Demo

Material Tailwind React

Material Tailwind Dashboard React is a free Admin Template based on two popular front-end technologies: Tailwind CSS and React. It was built to simplify the developer's work and is comes with a fresh design inspired by Google's Material Design. All its components are built to fit perfectly with each other, while aligning to the material concepts.

👉 Material Tailwind React - product page
👉 Material Tailwind React - LIVE demo

Tailwind React Dashboard

Notus React is built with over frontend 100 individual components, giving you the freedom to choose and combine. All components can take variations in colors that you can easily modify using Tailwind CSS classes.

👉 Tailwind React Dashboard - product page
👉 Tailwind React Dashboard - LIVE Demo

Berry React Dashboard

Berry is a creative yet minimal free react admin template build using the Material UI. It is meant to be the best User Experience with highly customizable. It is a complete game-changer React Dashboard Template with easy and intuitive responsive design as on retina screens or laptops.

👉 Berry React Dashboard - source code (MIT License)

Thanks for reading! For more resources, feel free to access:

✨ More Free Dashboards crafted in Django, Flask, and React
✨ More Admin Dashboards - a huge index with products

Top comments (39)

Robert Claypool • Jun 30 '19

github.com/ant-design/ant-design-pro

Wahaj Aayani • Oct 23 '19

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

Antonio Silva • Jul 26 '20

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

Sm0ke • May 27 '21 • Edited

Antd is a great React Dashboard.

Rakesh S Nakrani • Sep 13 '21

I suggest you must try all new Material-UI v5 library.

Sm0ke • Sep 13 '21

For sure I will Rakesh!
🚀🚀

Sm0ke • May 27 '21

AntD is pretty nice. Perf issues might be environmental.

saif ali • Jul 1 '19

I was about to post <3

Sm0ke • Jul 1 '19

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

Oscar Costa • Mar 22 '20

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.

Sm0ke • Mar 22 '20

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.

Petrus-Nauyoma • Jul 20 '21

Do I have to give attribution of some kind when using their products?

Sm0ke • Jul 21 '21

nope ...

Alan Smith • May 14 '20 • Edited

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

Oscar Costa • May 14 '20

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

Alan Smith • May 14 '20

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

Brijesh Dobariya • Sep 24 '22

Thank You for list Berry and Mantis in your list.

Sm0ke • Sep 24 '22

Great products.
Keep up the good work guys.

Harmony • Jan 2 '23

How does this work as a beginner?
I only have the knowledge of React and some libraries like Material UI
Do I have to pay to use any of these dashboard?

Sm0ke • Jan 2 '23

Hello @harmonygrams

All mentioned React Dashboards are free and based on the permissive (MI) license can be used in commercial project or eLearning activities.

Just pick one and code something great.
🚀🚀

Harmony • Jan 2 '23

Thanks

Fatemeh Paghar • Jan 12 '23

I want to contribute React open source project. Which one is better to try?

divyansh • Apr 14 '20

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 ?

Pete Steven • Jul 12 '21

You can try Desech Studio to visually create your html/css code. Then you can integrate it with react. Have a look at this github repo for more details.

Sm0ke • Apr 14 '20

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

Alan Smith • May 14 '20

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