DEV Community

Cover image for Open-Source Dashboards
Sm0ke
Sm0ke

Posted on • Edited on • Originally published at app-generator.dev

Open-Source Dashboards

Hello Coders,

This article presents a curated list with open-source dashboards provided by well-known agencies and open-source enthusiasts. The projects are actively supported and the permissive license allows the usage for hobby and commercial projects. Used technologies: Bootstrap 4/5, React, Flask, and Django (Python-based web frameworks).

πŸ‘‰ Build your starter with Django App Generator and customize: DB Tables, Auth, Async Tasks, Docker, CI/Cd Scripts

Django App Generator - Select Design
Django App Generator - Design Database


Django Rocket Tailwind

Open-source Django Template styled with Tailwind CSS/Flowbite. The product is designed to deliver the best possible developer experience with highly customizable feature-rich pages.

A common set of features is provided out-of-the-box: API, DataTables, Charts, Extended User Model, and Docker Support under a permissive MIT License (unrestricted usage in hobby or commercial projects).

  • πŸ‘‰ Django Rocket - Product Page
  • πŸ‘‰ Django Rocket - LIVE Demo
  • πŸ‘‰ Django Rocket Documentation - Complete Information and Support Links
    • Configuration: Install Tailwind/Flowbite, Prepare Environment, Setting up the Database
    • Start with Docker
    • Manual Build
    • Start the project
    • Deploy on Render

Django Rocket - Open-Source Django Starter styled with Tailwind/Flowbite


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 - Free Template.


Django Dashboard Datta

Datta Able Bootstrap Lite is the most stylized Bootstrap 4 Lite Admin Template, among all other Lite/Free admin templates in the market. It comes with highly feature-rich pages and components with fully developer-centric code.

Datta Able (enhaced with dark mode) - Open-Source Seed project generated by AppSeed.


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.

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.

Argon Dashboard Chakra - Free React Dashboard Template


Django AdminLTE

Open-source Django project crafted on top of AdminLTE, an open-source and iconic Bootstrap design.
The product is designed to deliver the best possible user experience with highly customizable feature-rich pages.

Django AdminLTE - Open-Source Django Starter


Django Material Dashboard

Open-source Django project crafted on top of Material Dashboard, an open-source Bootstrap 5 design from Creative-Tim.

This starter comes with a codebase that uses a theme-able UI (installed via PIP) that covers the admin section, and all other pages managed by Django Auth flow. On top of this, the CI/CD set up allows deploying LIVE the product on Render without effort or low-level configuration.

Material Dashboard - Full-Stack Starter generated by AppSeed.


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 Datta Able - Full-stack product powered by a simple NodeJS API backend.


Xtreme Vue Admin Lite

Xtreme BootstrapVue Admin Lite is easy to use and powerful VueJs admin dashboard template based on Vue CLI, Vuex & BootstrapVue component framework.

Xtreme Vue Admin Lite - Free Template.


Modernize MUI React

If you are looking for an eye-catching and elegantly designed free react admin template that comes with several added features, then look no more. Modernize React Admin is a free template that has everything you require to develop an amazing web app.

This product comes with a permissive (MIT) license, React 18+, Code Splitting and Redux toolkit.

Modernize MUI React - Open-source Template crafted by AdminMart.


React NodeJS Soft fullstack

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

React Soft Dashboard - Open-source full-stack product


Vue Soft UI Dashboard

Vue Soft 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. All components can take variations in color, which you can easily modify using SASS files and classes. You will save a lot of time going from prototyping to full-functional code because all elements are implemented.

Vue Soft UI Dashboard - Free Template.


Berry Angular

Berry Angular is the most stylized Admin Template, regularly updated which aims to help developers and designers to save time usually allocated to design a pixel-perfect layout and common components.

Berry Bootstrap - Free Angular 14 Template


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 - Free Template


Flexy React Material Admin Lite

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 Material Admin Lite.


Soft UI Dashboard Django

Admin dashboard coded in Django Framework. Designed for those who like bold elements and beautiful websites, Soft UI Dashboard is ready to help you create stunning websites and webapps - Features:

  • βœ… Up-to-date Dependencies
  • βœ… UI Kit: Bootstrap 5, Persistent Dark-Mode
  • βœ… Basic Authentication, OAuth via Github
  • βœ… API Generator Module - video presentation
  • βœ… Dynamic Data Tables - video presentation

Soft UI Dashboard - Full-Stack Starter generated by AppSeed.


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 - Open-Source React Template by CodedThemes.


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.

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 - Open-Source


Django Datta Able

Datta Able Bootstrap Lite is the most stylized Bootstrap 4 Lite Admin Template, around all other Lite/Free 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.

Datta Able (enhaced with dark mode) - Open-Source Seed project generated by AppSeed.


Flask Bootstrap 5 Volt

Open-Source Flask Dashboard coded with basic modules, database, ORM, and deployment scripts on top of Volt (free version), a modern Bootstrap dashboard design. Volt is a free and open-source Bootstrap 5 Admin Dashboard featuring over 100 components, 11 example pages, and 3 customized plugins. Volt does not require jQuery as a dependency meaning that every library and script is jQuery-free.

Volt Dashboard - Full-Stack Starter generated by AppSeed.


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.


Django Dashboard Material

Designed for those who like bold elements and beautiful websites, Material Dashboard 2 is ready to help you create stunning websites and web apps. Material Dashboard 2 is built with over 60 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining.

Material Dashboard - Full-Stack Starter generated by AppSeed.


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

Top comments (28)

Collapse
 
kp profile image
KP

Awesome list! Please do one on automation of Vuejs / javascript code.

Collapse
 
sm0ke profile image
Sm0ke

Hello KP,
Can you elaborate, please?

Collapse
 
kp profile image
KP

Hi @sm0ke ! Looking at your profile, you know a thing or two about automation....and I'm wondering if you know enough about automation of Vuejs / javascript code to write an article about that.

Thread Thread
 
sm0ke profile image
Sm0ke

Hello @KP,
Yep, I will. Right now I'm using sort automation for Vue, React apps, but I'm still in the R&D phase. My current work-flow:

  • Use the Html Parser to extract the components
  • Inject Components, layouts in Vue, React boilerplates.
  • Apps are built on a decoupled architecture, where the backend and the frontend are separated.

Anyway, I'm years behind Nuxt, and other tools, but in the end, my automation flow produces apps with usable UI, which is great IMO.

Thread Thread
 
kp profile image
KP

@sm0ke : Nuxt is great but incredibly complex imo. I'm playing with laravel + inertiaJs at the moment, and am loving it. Look forward to seeing what you cook up!

Thread Thread
 
sm0ke profile image
Sm0ke • Edited

AppSeed - App Generator - this product put together my whole R&D work for the last two years.
The hidden fact about it is that I'm using automation to generate apps for different technologies:

  • vue, react
  • full-stack boilerplates
  • jamstack apps
  • bulma css apps

More will come, in the near future because my flow becomes faster. Apps can be used without an account because we all knew that open-source is a sexy thing.

Now I'm looking for options to migrate legacy Bootstrap apps to Bulma CSS & Tailwind. I will provide an open-source tool for this in the next 2mo. The idea is not mine, check out this tool, written in Php. :)

I will code the tool in Python / BS4 with an extension to Tailwind. But this is another R&D jump.

Thread Thread
 
kp profile image
KP

@sm0ke ...great work! Looks like a lot went into this. For some reason I thought automation meant testing (versus automated builder tools). This is pretty cool, too!

Thread Thread
 
sm0ke profile image
Sm0ke

Thank you!

Collapse
 
theme_selection profile image
ThemeSelection • Edited

Awesome list. πŸ™Œ
We have just released Vuexy- Angular version.

What's in the angular version?
πŸ‘‰Based on NgBootstrap
πŸ‘‰Angular CLI
πŸ‘‰Role-based JWT Auth
πŸ‘‰API Ready
πŸ‘‰Sketch & Figma files added
πŸ‘‰Internationalization/i18n & RTL Ready and many more.

Collapse
 
sm0ke profile image
Sm0ke

Looks good! Let me know if the product has an open-source version.

Collapse
 
kaushalgautam profile image
Kaushal Gautam

Hi Sm0ke! Great article. I've always been curious as to how Admin dashboards work. Can you do a beginner article on how to use a simple one and it's benifits and such? A primer, if you will. :)

Collapse
 
sm0ke profile image
Sm0ke

Hello @kaushalgautam ,
I will try to add the topic you suggest on my list.
I have some articles related to dashboards topic but are related to Flask. Take a look, and tell me if you find them useful.

Collapse
 
kaushalgautam profile image
Kaushal Gautam

The first link is good. I skimmed through it and I believe there are things I don't know in it. I will check it out. A dashboard primer would still be great though. :)

Collapse
 
geopopos profile image
George Roros

You’re the hero this world needs

Collapse
 
sm0ke profile image
Sm0ke

:)

Collapse
 
liyasthomas profile image
Liyas Thomas

This is gold ✨
Can you do one for Angular too? And not just dashboards.. but also include landing pages etc. πŸ”₯

Collapse
 
marcus-sa profile image
Marcus S. Abildskov

Yeah, people always seem to miss out on Angular.. even though it's widely used

Collapse
 
sm0ke profile image
Sm0ke

Hello Marcus,

Angular is a great library, but I'm writing my articles starting from my own experience and Angular is not on my tech list, unfortunately.

Happy coding :)

Collapse
 
sm0ke profile image
Sm0ke

Noted. Thank you!

Collapse
 
mohdmuzzammil profile image
MohdMuzzammil

Hi,

Nodezap is an internal tool building platform. This can be used to build automations, workflows, UI, integrations and much more.

It has easy interface with collaborative environment where entire team can collaborate to build the workflow and solutions without any technical knowledge. Its easy drag and drop UI and workflow building experience makes it easy for anyone to collaborate within no time.

Collapse
 
vip3rousmango profile image
Al Romano

This is great, thanks!! Always nice to see what others are making in the dashboard space.

Collapse
 
sm0ke profile image
Sm0ke

Yw.

Collapse
 
idrisrampurawala profile image
Idris Rampurawala

Awesome! Request if you can share the same for Angular 7 :)

Collapse
 
razrcallahan profile image
razrcallahan

Hey Sm0ke .. any plans to support Spring framework boilerplate with VueJs?

Collapse
 
sm0ke profile image
Sm0ke

Hello @razrcallahan ,

Thanks for noticing this article. Nope, sorry. Java is too heavy for my toolchain. I'm continuing my R&D to light resources like Flask, Static sites, and small footprint frameworks.

Spring is great but I'm working alone in my startup.
We can chat on my Discord if you want.

See u!

Collapse
 
sm0ke profile image
Sm0ke

Yw. :)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.