React Dashboard - Black Design

Hello,

This article presents an open-source React Dashboard released under the MIT License by Creative-Tim, a company that helps many developers across the globe with free products, actively supported and versioned. This dark-themed React Dashboard can be downloaded from the product page or directly from Github, and based on the permissive license, the product can be used for unlimited hobby and commercial products. Thank you for reading!

React Dashboard Black Links

• React Dashboard - Black Design, the product page
• React Dashboard - Black Demo, something to click on fast
• React Dashboard PRO - the Premium Version (160 components, 16 pages)
• React Dashboards - a curated list published on Dev.to platform
• More React Freebies provided by Creative-Tim

What is React

For newcomers, React is a Javascript library for building user interfaces, .. fast. This well-known JS library helps developers to compose complex UIs from small and isolated pieces of code called "reusable UI components", which present data that changes over time. To start playing with React, feel free to access below resources:

• React - the official project site
• Intro to React - a nice tutorial for beginners
• ReactJS - Quick Guide, published by TutorialsPoint

React Dashboard Black - product info

Black Dashboard React is a beautiful Bootstrap 4 (Reactstrap) Admin Dashboard with a huge 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.

Black Dashboard React features over 16 individual components, giving you the freedom of choosing and combining. This means that there are thousands of possible combinations. All components can take variations in color, that you can easily modify using SASS files. You will save a lot of time going from prototyping to full-functional code because all elements are implemented.

We thought about everything, so this dashboard comes with 2 versions, Dark Mode and Light Mode.

React Dashboard - Compile from sources

To compile and start the project locally we need NodeJS and optionally GIT to download the source code from the public repository: Black Dashboard React. To install NodeJs is quite easy, just access the official NodejS website, download and execute the installer for your OS.

How to compile the sources

$ # Get the code
$ git clone https://github.com/creativetimofficial/black-dashboard-react.git
$ cd black-dashboard-react
$
$ # Install modules
$ yarn
$
$ # Start the app (development mode)
$ yarn start

If all goes well, this React template should be up & running in the browser.

The template project comes with pre-build pages and a codebase easy to extend even by React beginners. Here is a snapshot with codebase strucure:  

black-dashboard-react
.
├── package.json              # 
├── Documentation             #
│   └── documentation.html    #
├── public                    # 
│   ├── index.html            # Main HTML file 
│   └── manifest.json         #
└── src                       #
    ├── index.js              # React bootstrap file
    ├── logo-white.svg        #
    ├── logo.svg              #
    ├── routes.js             # Define app routes
    ├── assets                # Assets folder
    │   ├── css               #
    │   ├── demo              #
    │   ├── fonts             #
    │   ├── img               #
    │   └── scss              # 
    │                         # 
    ├── components            # Components Folder
    │   ├── FixedPlugin       #
    │   ├── Footer            #
    │   ├── Navbars           #
    │   └── Sidebar           #
    │                         #  
    ├── layouts               # Master Pages
    │   ├── Admin             # 
    │   │   └── Admin.js      # Main Page
    │   └── RTL               #
    │       └── RTL.js        # RTL Layout page
    │                         # 
    ├── variables             #
    │   └── charts.js         # Data used in charts
    │                         # 
    └── views                 #
        ├── Dashboard.js      # Dashboard Page
        ├── Rtl.js            # RTL Page
        ├── Map.js            # Google Map page
        ├── Icons.js          # UI Icons
        ├── Notifications.js  # UI Notification Page
        ├── TableList.js      # UI Tables
        ├── Typography.js     # UI Typography
        └── UserProfile.js    # User Profile Page

React Dashboard - User Profile Page

Thanks for reading! For more freebies from Creative-Tim please access the platform. Want more? GO PRO with  Black Dashboard PRO React

Black Dashboard PRO React is a beautiful Bootstrap 4 (reactstrap) Admin Dashboard that comes in 2 versions: Dark and Light Mode. 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.

We made it our priority to not add things that you don't need, so the Black Dashboard PRO React comes with just enough features for you to easily use. It combines multiple components and plugins and features numerous example of how it can be used. Inside the archive, you will also find multiple example pages to get you started or provide inspiration.

Links - React Dashboard PRO (product page), LIVE Demo