Git Product home page Git Product logo

now-ui-dashboard-react's Introduction

version license GitHub issues open GitHub issues closed Chat

Product Gif

Now UI Dashboard React is an admin dashboard template designed to be beautiful and simple. It is built on top of Reactstrap and React (create-react-app), using Now UI Dashboard and it is fully responsive. It comes with a big collections 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.

The product represents a big suite of front-end developer tools that can help you jump start your project. We have created it thinking about things you actually need in a dashboard. Now UI Dashboard React contains multiple handpicked and optimized plugins. Everything is designed to fit with one another. As you will be able to see, the dashboard you can access on Creative Tim is a customization of this product.

It comes with 6 filter colors for the sidebar (black, blue, green, orange, red, yellow) and an option to have a background image.

Table of Contents

Versions

HTML React Angular
Now UI Dashboard HTML Now UI Dashboard React Now UI Dashboard Angular

Demo

Dashboard User Profile Tables Maps Notification
Start page User profile page Tables page Maps Page Notification page

View More.

Quick start

Quick start options:

  • npm i now-ui-dashboard-react (you will need to import from the dist folder our components)
  • Clone the repo: git clone https://github.com/creativetimofficial/now-ui-dashboard-react.git.
  • Download from Github.
  • Download from Creative Tim.

Documentation

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

File Structure

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

Now UI Dashboard React
├── CHANGELOG.md
├── Documentation
│   └── tutorial-components.html
├── LICENSE.md
├── README.md
├── package.json
├── public
│   ├── apple-icon.png
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── assets
    │   ├── css
    │   │   └── demo.css
    │   ├── fonts
    │   │   └── ...
    │   ├── img
    │   │   ├── flags
    │   │   │   └── ...
    │   │   └── ...
    │   └── sass
    │       ├── now-ui-dashboard
    │       │   ├── mixins
    │       │   │   └── ...
    │       │   ├── plugins
    │       │   │   └── ...
    │       │   └── ...
    │       └── now-ui-dashboard.scss
    ├── components
    │   ├── Card
    │   │   └── Card.js
    │   ├── Footer
    │   │   └── Footer.js
    │   ├── FormInputs
    │   │   └── FormInputs.js
    │   ├── Header
    │   │   └── Header.js
    │   ├── Sidebar
    │   │   └── Sidebar.js
    │   └── Task
    │       └── Task.js
    ├── containers
    │   └── App
    │       └── App.js
    ├── elements
    │   ├── CardElements
    │   │   ├── CardLegend.js
    │   │   ├── CardStatistics.js
    │   │   ├── CardStats.js
    │   │   └── UserCardAuthor.js
    │   ├── CustomButton
    │   │   └── CustomButton.js
    │   ├── CustomCheckbox
    │   │   └── CustomCheckbox.js
    │   └── CustomRadio
    │       └── CustomRadio.js
    ├── index.js
    ├── routes
    │   └── app.js
    ├── variables
    │   ├── charts.js
    │   ├── general.js
    │   └── icons.js
    └── views
        ├── Dashboard
        │   └── Dashboard.js
        ├── Icons
        │   └── Icons.js
        ├── Maps
        │   └── Maps.js
        ├── Notifications
        │   ├── NotificationSystem
        │   │   └── NotificationSystem.js
        │   └── Notifications.js
        ├── Table
        │   └── Tables.js
        ├── Typography
        │   └── Typography.js
        └── User
            └── User.js

Browser Support

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

Resources

Reporting Issues

We use GitHub Issues as the official bug tracker for the Now 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 Now 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

Useful Links

More products from Creative Tim: https://www.creative-tim.com/products

Tutorials: https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w

Freebies: https://www.creative-tim.com/products

Affiliate Program (earn money): https://www.creative-tim.com/affiliates/new

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

now-ui-dashboard-react's People

Contributors

einazare avatar maisamaf avatar marqbeniamin avatar sajadevo avatar timcreative avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

now-ui-dashboard-react's Issues

npm install failed

Im not able to npm install this because I get the below error:

npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb which succeeded python C:\Python310\python.EXE
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: C:\Python310\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack File "", line 1
npm ERR! gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
npm ERR! gyp ERR! stack SyntaxError: Missing parentheses in call to 'print'. Did you mean print(...)?
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack at ChildProcess.exithandler (node:child_process:398:12)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:527:28)
npm ERR! gyp ERR! stack at maybeClose (node:internal/child_process:1092:16)
npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)
npm ERR! gyp ERR! System Windows_NT 10.0.19042
npm ERR! gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\now-ui-dashboard-react\node_modules\node-gyp\bin\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd C:\Users\now-ui-dashboard-react\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.15.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

[Bug] CSS Sourcemaps not working

Version

1.2

Reproduction link

https://github.com/creativetimofficial/now-ui-dashboard-react

Operating System

10.15.2 - Catalina

Device

Mac

Browser & Version

Chrome 10.15.2

Steps to reproduce

npm start
go to localhost:3000
inspect element
CSS only shows the inline styling

What is expected?

In inspect element you should see the styling and what scss file it originates from

What is actually happening?

it's displaying as inline styling in inspect element


Solution

Additional comments

Sidebar overflow

There is a little issue with the sidebar when opened on mobile devices, i can't figure it out why it overflow on the bottom.

otherwise thank you for this template :)

Modal

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • [yes ] I am running the latest version
  • [yes ] I checked the documentation and found no answer
  • [ yes] I checked to make sure that this issue has not already been filed
  • [ yes] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

The Modal appears in the correct location on every presentation.

Current Behavior

Sometimes the Modal does not appear in the correct location.
(https://imgur.com/a/53GNcAr)

Failure Information (for bugs)

The Modal in Now-Ui-Dashboard-react is buggy on Safari. A portion of it sometimes gets cut off in the Safari Browser on presentation.

Steps to Reproduce

Use Safari Browser.

  1. Navigate to the premade Notifications page.
  2. Click "Notice Modal", then click "small alert modal". Keep clicking, opening, and repeating this process until you notice that one of the modals doesn't appear properly and gets stuck while cut off.

Context

Occurs on Safari. The code is the default code that comes with the latest version of Now-UI Dashboard Pro React.

  • Device: Macbook
  • Operating System: Mac OS Mojave
  • Browser and Version: Safari Version 12.0.1

Failure Logs

N/A

[Bug] Only 7 Components in Pro version

Version

1.2.0

Reproduction link

https://github.com/Pt4r

Operating System

WIndows 10

Device

PC

Browser & Version

Firefox

Steps to reproduce

Just download it

What is expected?

To get 169 comps as described

What is actually happening?

I get only 7


Solution

Additional comments

[Bug] npm install failed

Version

1.0.2

Reproduction link

https://github.com/creativetimofficial/now-ui-dashboard-react.git

Operating System

Windows 10

Device

PC

Browser & Version

N/A

Steps to reproduce

clone repo
npm install

What is expected?

npm install completes successfully

What is actually happening?

Im not able to npm install this because I get the below error:

npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb which succeeded python C:\Python310\python.EXE
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: C:\Python310\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack File "", line 1
npm ERR! gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
npm ERR! gyp ERR! stack SyntaxError: Missing parentheses in call to 'print'. Did you mean print(...)?
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack at ChildProcess.exithandler (node:child_process:398:12)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:527:28)
npm ERR! gyp ERR! stack at maybeClose (node:internal/child_process:1092:16)
npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)
npm ERR! gyp ERR! System Windows_NT 10.0.19042
npm ERR! gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\now-ui-dashboard-react\node_modules\node-gyp\bin\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd C:\Users\now-ui-dashboard-react\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.15.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1


Solution

Additional comments

How to pass data dynamically to charts

Hey, guys, this is rather a question than an issue. Can you advise how to pass data to the charts? Currently all the data is hardcoded and I can't find a way to pass the data to the charts.js file.

Thanks.

How to prefill forms with data.

the form data will not change if used like this.

{ label: "New Name", inputProps: { type: "text", name: "name", required: true, value: this.state.old_name } },

Top navigation slideout does not close on submenu click

When clicking on the 3-dot menu slideout (top), I would expect for this slideout to close when I click on any of the items contained inside (it is navigation, so if I click somewhere, I want to go there and not have the menu still block half my viewport). The same issue is on the pro version.

Any idea how to fix this? Firing toggle() will not work as we want this only on small screens (below the 3-dot menu breakpoint).

Thanks.

Line 124:15: Parsing error: Unexpected token

I can't compile i am getting this error.
./src/components/Navbars/DemoNavbar.js
Line 124:15: Parsing error: Unexpected token

122 | // add or remove classes depending if we are on full-screen-maps page or not
123 | <Navbar

124 | this.props.location.pathname.indexOf("full-screen-maps") !== -1
| ^
125 | ? "white"
126 | : this.state.color
127 | }

Mobile navigation is not smooth

I just wanted to start with a big thanks to you guys. I love your work, your themes look amazing!

Prerequisites

  • I am running the latest version
  • I checked the documentation and found no answer
  • I checked to make sure that this issue has not already been filed
  • I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

I expect the page scrolling on mobile (it works perfectly on my macbook pro) to be like other websites. If I give an impulsion towards the bottom/top of my screen with my finger, I want the page to scroll up/down smoothly, loose speed as it goes up/down and stop by itself.

Current Behavior

What is the current behavior?

To scroll up/down I need to keep the finger on the screen and drag it up/down. As soon as I remove the finger from the screen, the scrolling stops.
I checked other of your React themes with my mobile and they work properly. This issue seems to be only with this theme

Failure Information (for bugs)

Steps to Reproduce

With a mobile:

  1. Go to the now-ui-dashboard theme: link
  2. Try to scroll up or down
  3. Go to a working theme: black dashboard react
  4. Try to scroll up or down and see the difference

Context

  • Device: iPhone 7
  • Operating System: iOS 12.1.1
  • Browser and Version: Chrome (latest version) & Safari (latest version)

[Bug] Error in documentation

Version

1.2.0

Reproduction link

https://demos.creative-tim.com/now-ui-dashboard-react/#/documentation/alerts

Operating System

N/A

Device

N/A

Browser & Version

N/A

Steps to reproduce

Navigate to https://demos.creative-tim.com/now-ui-dashboard-react/#/documentation/alerts

What is expected?

Each alert type should have a different name:
primary, secondary, success, etc.

What is actually happening?

Each alert has the same name (primary), although the colors are correct.


Solution

Fix the names of the alerts.

Additional comments

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.