creativetimofficial / soft-ui-dashboard-react

Soft UI Dashboard React - Free Dashboard using React and Material UI

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.

Fully Coded Elements 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. All components can take variations in color, which you can easily modify using MUI styled api and sx prop. You will save a lot of time going from prototyping to full-functional code because all elements are implemented. This Premium MUI 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.

View all components here.

Documentation built by Developers

Each element is well presented in very complex documentation.

You can read more about the documentation here.

Example Pages

If you want to get inspiration or just show something directly to your clients, you can jump-start your development with our pre-built example pages. Every page is spaced well, with attractive layouts and pleasing shapes. Soft UI Dashboard React has everything you need to quickly set up an amazing project.

View example pages here.

HELPFUL LINKS

• View Github Repository
• Check FAQ Page

Special thanks

During the development of this dashboard, we have used many existing resources from awesome developers. We want to thank them for providing their tools open source:

• MUI - The React UI library for faster and easier web development.
• React Countup - A lightweight React component that can be used to quickly create animations that display numerical data in a more interesting way.
• React ChartJS 2 - Simple yet flexible React charting for designers & developers.
• ChromaJS - A small-ish zero-dependency JavaScript library for all kinds of color conversions and color scales.
• UUID - JavaScript library for generating random id numbers.
• Nepcha Analytics for the analytics tool. Nepcha is already integrated with Soft UI Dashboard React. You can use it to gain insights into your sources of traffic.

Let us know your thoughts below. And good luck with development!

Table of Contents

• Versions
• Demo
• Quick Start
• Deploy
• Documentation
• File Structure
• Browser Support
• Resources
• Reporting Issues
• Technical Support or Questions
• Licensing
• Useful Links

Versions

React

|

Demo

• Dashboard
• Profile
• RTL
• Sign In
• Sign Up

View More.

Quick start

Quick start options:

• Buy from Creative Tim.

Deploy

🚀 You can deploy your own version of the template to Genezio with one click:

Terminal Commands

1. Download and Install NodeJs LTS version from NodeJs Official Page.
2. Navigate to the root ./ directory of the product and run yarn install or npm install to install our local dependencies.

Documentation

The documentation for the Soft UI Dashboard is hosted at our website.

What's included

Within the download you'll find the following directories and files:

soft-ui-dashboard-react
    ├── public
    │   ├── apple-icon.png
    │   ├── favicon.png
    │   ├── index.html
    │   ├── manifest.json
    │   └── robots.txt
    ├── src
    │   ├── assets
    │   │   ├── images
    │   │   └── theme
    │   │       ├── base
    │   │       ├── components
    │   │       ├── functions
    │   │       ├── index.js
    │   │       └── theme-rtl.js
    │   ├── components
    │   │   ├── SoftAlert
    │   │   ├── SoftAvatar
    │   │   ├── SoftBadge
    │   │   ├── SoftBox
    │   │   ├── SoftButton
    │   │   ├── SoftInput
    │   │   ├── SoftPagination
    │   │   ├── SoftProgress
    │   │   └── SoftTypography
    │   ├── context
    │   ├── examples
    │   │   ├── Breadcrumbs
    │   │   ├── Cards
    │   │   ├── Charts
    │   │   ├── Configurator
    │   │   ├── Footer
    │   │   ├── Icons
    │   │   ├── Items
    │   │   ├── LayoutContainers
    │   │   ├── Lists
    │   │   ├── Navbars
    │   │   ├── Sidenav
    │   │   ├── Tables
    │   │   └── Timeline
    │   ├── layouts
    │   │   ├── authentication
    │   │   ├── billing
    │   │   ├── dashboard
    │   │   ├── profile
    │   │   ├── rtl
    │   │   ├── tables
    │   │   └── virtual-reality
    │   ├── App.js
    │   ├── index.js
    │   └── routes.js
    ├── .eslintrc.json
    ├── .prettierrc.json
    ├── CHANGELOG.md
    ├── ISSUE_TEMPLATE.md
    ├── jsconfig.json
    ├── LICENSE.md
    ├── package.json
    └── README.md

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Resources

• Live Preview
• Buy Page
• Documentation is here
• License Agreement
• Support
• Issues: Github Issues Page
• Nepcha Analytics - Analytics tool for your website

Reporting Issues

We use GitHub Issues as the official bug tracker for the Soft UI Dashboard React. Here are some advices for our users that want to report an issue:

1. Make sure that you are using the latest version of the Soft UI Dashboard React. Check the CHANGELOG from your dashboard on our website.
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help integrating the product please contact us instead of opening an issue.

Licensing

• Copyright 2021 Creative Tim
• Creative Tim license

Useful Links

• More products from Creative Tim

• Tutorials

• Freebies from Creative Tim

• Affiliate Program (earn money)

Social Media

Twitter: https://twitter.com/CreativeTim

Facebook: https://www.facebook.com/CreativeTim

Dribbble: https://dribbble.com/creativetim

Google+: https://plus.google.com/+CreativetimPage

Instagram: https://instagram.com/creativetimofficial

soft-ui-dashboard-react's Issues

[Bug] Error on using Calendar component

Version

v4.0.0

Reproduction link

none

Operating System

Windows 11

Device

PC

Browser & Version

Latest Opera, Mozilla, Chrome

Steps to reproduce

Just try to render layouts/pages/rtl/index.js

What is expected?

Calender is shown.

What is actually happening?

Warning: DayTableView defines an invalid contextType. contextType should point to the Context object returned by React.createContext(). However, it is set to an object with keys {__c, __, Consumer, Provider}.

---

Solution

Right now not to use it at all, but i kind of like it.

Link is not important because we don't have the current development there.

Additional comments

Cannot read properties of undefined (reading 'labels')

Cannot read properties of undefined (reading 'labels')

When I install and start application getting this error

[Bug] Labels problem

Version

2.0.0

Reproduction link

https://www.creative-tim.com/new-issue/soft-ui-dashboard-pro-material-ui

Operating System

Windows

Device

PC

Browser & Version

Chrome

Steps to reproduce

npm i
npm start

What is expected?

Run the pages... but appears a error

What is actually happening?

TypeError: Cannot read properties of undefined (reading 'labels')

---

Solution

Additional comments

[Bug] Failed to compile + page displays an iframe where I can't click anything

Version

3.0.0

Reproduction link

https://www.creative-tim.com/learning-lab/material-ui-marketplace/quick-start/soft-ui-dashboard/

Operating System

MacOS 12.2.1

Device

MacBook Pro

Browser & Version

Google Chrome 98.0.4758.102

Steps to reproduce

1. yarn install
2. yarn start

What is expected?

https://demos.creative-tim.com/soft-ui-dashboard-pro-react/marketplace/#/dashboards/default

What is actually happening?

Failed to compile.

Failed to load config "react-app" to extend from.
Referenced from: /...../package.json

http://localhost:3000/dashboards/default opens, but it is an iframe and I can't click on any elements.

---

Solution

Additional comments

I've bought the PRO version. Order nr. #37889

npm install

npm install
then I get the error is:

npm install reac-scripts
(⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠏ idealTree:soft-ui-dashboard-react: sill idealTree buildDeps
(⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠏ idealTree:soft-ui-dashboard-react: sill idealTree buildDeps
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"18.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0" from [email protected]
npm ERR! node_modules/react-chartjs-2
npm ERR!   react-chartjs-2@"3.0.4" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /home/parallels/.npm/_logs/2023-03-31T05_49_48_096Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/parallels/.npm/_logs/2023-03-31T05_49_48_096Z-debug-0.log

Why do I keep getting Delete 'cr' [prettier/prettier]?

As I was starting application I am getting a prettier error

[Bug] Failes to compile; eslintrc.json conflict

Version

3.1.0

Reproduction link

NA

Operating System

MacOS 12.3

Device

macpro M1

Browser & Version

NA

Steps to reproduce

From the creative tim project root,

1. yarn install
2. yarn start

ERROR in Plugin "react" was conflicted between ".eslintrc.json" and "BaseConfig » /Users/edmund/Programming-Local/tnc-react-app/soft-ui-dashboard-pro-react-v3.1.0/node_modules/eslint-config-react-app/base.js".

What is expected?

I expected it to compile without a conflict between eslint configuration files.

What is actually happening?

It isn't compiling.

---

Solution

Additional comments

I haven't done anything with the code. I'm surprised the fresh version of the app doesn't compile. I look forward to getting a version that does.

[Bug] Can not run "npm install" because of "react": "17.0.2" and "react-html-parser": "2.0.2" packages conflicts.

Version

2.0.0

Reproduction link

http://localhost

Operating System

MAC

Device

Mac Mini (2018)

Browser & Version

NA

Steps to reproduce

1. Download code from Creative Tim
2. Unzip
3. Rename the root folder to "client"
4. Terminal go to client directory
5. Run "npm install" command

What is expected?

Installing the whole necessary packages under node_modules

❯ node -v
v16.13.0
❯ npm -v
8.1.4

What is actually happening?

Error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.0 || ^15.0.0 || ^16.0.0-0" from [email protected]
npm ERR! node_modules/react-html-parser
npm ERR! react-html-parser@"2.0.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

---

Solution

npm install --legacy-peer-deps

Additional comments

The error log file:

npm resolution error report

2021-11-29T11:04:24.266Z

While resolving: [email protected]
Found: [email protected]
node_modules/react
react@"17.0.2" from the root project

Could not resolve dependency:
peer react@"^0.14.0 || ^15.0.0 || ^16.0.0-0" from [email protected]
node_modules/react-html-parser
react-html-parser@"2.0.2" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Raw JSON explanation object:

{
"code": "ERESOLVE",
"current": {
"name": "react",
"version": "17.0.2",
"whileInstalling": {
"name": "soft-ui-dashboard-pro-react",
"version": "3.0.0",
"path": "/Users/akaymu/Kodlar/kendi-kodlarim/learning-platform/client"
},
"location": "node_modules/react",
"isWorkspace": false,
"dependents": [
{
"type": "prod",
"name": "react",
"spec": "17.0.2",
"from": {
"location": "/Users/akaymu/Kodlar/kendi-kodlarim/learning-platform/client"
}
}
]
},
"currentEdge": {
"type": "prod",
"name": "react",
"spec": "17.0.2",
"from": {
"location": "/Users/akaymu/Kodlar/kendi-kodlarim/learning-platform/client"
}
},
"edge": {
"type": "peer",
"name": "react",
"spec": "^0.14.0 || ^15.0.0 || ^16.0.0-0",
"error": "INVALID",
"from": {
"name": "react-html-parser",
"version": "2.0.2",
"whileInstalling": {
"name": "soft-ui-dashboard-pro-react",
"version": "3.0.0",
"path": "/Users/akaymu/Kodlar/kendi-kodlarim/learning-platform/client"
},
"location": "node_modules/react-html-parser",
"isWorkspace": false,
"dependents": [
{
"type": "prod",
"name": "react-html-parser",
"spec": "2.0.2",
"from": {
"location": "/Users/akaymu/Kodlar/kendi-kodlarim/learning-platform/client"
}
}
]
}
},
"strictPeerDeps": false,
"force": false
}

Problem Redirecting to Sign In Page from Dashboard (DashboardNavbar)

### Redirection Issue from Dashboard Navbar to Sign In Page.

Solution

1. Navigate to "src\examples\Navbars\DashboardNavbar\index.js"
2. Change /authentication/sign-in/basic to /authentication/sign-in

This issue is only applicable to FREE Version. PRO Version Works Good.

Prop type "object", "array" are forbidden

Issue when Reinstalling Project

When we try to reinstall the project with npm install and npm start (Fresh Install).

Failed to compile.

src/examples/Cards/InfoCards/ProfileInfoCard/index.js
  Line 127:3:  Prop type "object" is forbidden  react/forbid-prop-types

src/examples/Cards/ProjectCards/DefaultProjectCard/index.js
  Line 175:3:  Prop type "object" is forbidden  react/forbid-prop-types

src/examples/Charts/BarCharts/ReportsBarChart/index.js
  Line 104:3:  Prop type "object" is forbidden  react/forbid-prop-types

src/examples/Charts/LineCharts/GradientLineChart/index.js
  Line 109:3:  Prop type "array" is forbidden  react/forbid-prop-types

src/examples/Footer/index.js
  Line 114:3:  Prop type "object" is forbidden  react/forbid-prop-types

src/examples/Lists/ProfilesList/index.js
  Line 85:3:  Prop type "object" is forbidden  react/forbid-prop-types

src/examples/Sidenav/index.js
  Line 191:3:  Prop type "object" is forbidden  react/forbid-prop-types

src/examples/Tables/Table/index.js
  Line 155:3:  Prop type "object" is forbidden  react/forbid-prop-types
  Line 156:3:  Prop type "object" is forbidden  react/forbid-prop-types

The Issue is related to prop-types package a library for typechecking of props. The below two prop type are flagged as forbidden by react/forbid-prop-types

1. Object (PropTypes.object)
2. Array (PropTypes.Array)

side nav is not working

here's the code.

{
name: "Dashboards",
key: "dashboards",
icon: ,
collapse: [
{
name: "Default",
key: "default",
route: "/dashboards/default",
},
{
name: "Automotive",
key: "automotive",
route: "/dashboards/automotive",
},
]
}

but nested sidenav is not showing

[Bug] Initial setup of development env

Version

2.0.0

Reproduction link

https://www.creative-tim.com/learning-lab/react/quick-start/soft-ui-dashboard

Operating System

macOS Big Sur 11.5.2

Device

Macbook pro

Browser & Version

Chrome v94....

Steps to reproduce

1. Download free version: https://www.creative-tim.com/product/soft-ui-dashboard-react
2. Unzip package
3. Run: npm run install:clean

What is expected?

Expected to run in port 3000

What is actually happening?

TypeError: Cannot read properties of undefined (reading 'labels')
ChartComponent
src/chart.tsx:136
133 | if (!redraw && chartRef.current) {
134 | setLabels(chartRef.current.config.data, data.labels);
135 | }

136 | }, [redraw, data.labels]);
| ^ 137 |
138 | useEffect(() => {
139 | if (!redraw && chartRef.current && data.datasets) {
View compiled
▶ 19 stack frames were collapsed.
Module.
src/index.js:24
21 | // Soft UI Dashboard React Context Provider
22 | import { SoftUIControllerProvider } from "context";
23 |
24 | ReactDOM.render(
25 |
26 |
27 |
View compiled
Module../src/index.js
http://localhost:3000/soft-ui-dashboard-react/static/js/main.chunk.js:26002:30
webpack_require
++++

---

Solution

None. Need help. Considering buying, but free version wont work.

Additional comments

I have followed your steps from: https://www.creative-tim.com/learning-lab/react/quick-start/soft-ui-dashboard

... but it doesn't work. Please help.

Btw, how difficult would you say it is to transfer this to next.js?

can you provide figma ?

can you provide figma ? or the design document ?.

[Bug] Missing SuiBox Wrapper in AuthPage Footers

Version

2.0.0

Reproduction link

https://demos.creative-tim.com/soft-ui-dashboard-react/#/authentication/sign-up

Operating System

Windows

Device

Desktop PC

Browser & Version

All

Steps to reproduce

1. https://demos.creative-tim.com/soft-ui-dashboard-react/#/authentication/sign-up
2. Footer last element (Pricing) is now lined up propperly

What is expected?

trivial

What is actually happening?

/

---

Solution

File: src\layouts\authentication\components\Footer\index.js

Pricing

to

        <SuiBox mr={{ xs: 2, lg: 3, xl: 6 }}>
          <SuiTypography component="a" href="#" variant="body2" textColor="primary">
            Pricing
          </SuiTypography>
        </SuiBox>

Additional comments

:)

[Feature Request] Upgrading dependency

What is your enhancement?

first I downloaded the folder containing all the files from github at the following link https://github.com/creativetimofficial/soft-ui-dashboard-react

when I tried npm install. a message appeared unable to resolve dependency tree.

npm ERR! ERESOLVE code
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! When resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"18.2.0" from root project
npm ERR!
npm ERR! Unable to resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0" from [email protected]
npm ERR! node_modules/react-chartjs-2
npm ERR! react-chartjs-2@"3.0.4" from the root project
npm ERR!
npm ERR! Fix upstream dependency conflicts, or try again
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept incorrect (and potentially broken) dependency resolution.

this is due to a conflict in the react-chartjs-2 dependency with react 18. please update the dependency. in hopes of fixing the issue.

there is no accordion or collapsible in the theme.

We would like to buy your theme but we need some things like collapsible or accordion, is it possible to provide, we have checked the theme but didn't find it.