creativetimofficial / ct-now-ui-kit-pro-react

React version of Now UI Kit PRO by Creative Tim

Now UI Kit PRO React

Now UI Kit PRO React is a premium Bootstrap 4 kit provided by Invision and Creative Tim. It is built over React, React Hooks and Reactstrap using Create React App. It is a beautiful cross-platform UI kit featuring over 1000 components, 34 sections and 11 example pages.

Now UI Kit is one of the most popular UI Kits online, provided in PSD and Sketch formats by Invision. We wanted to find a way for developers worldwide to benefit from using it. We created the fully coded version of Now UI Kit React and based on the feedback that we've got from our users we've created the PRO version.

Now UI Kit PRO React will help you create a clean and simple website that is a perfect fit for today's flat design. It is built using the Bootstrap 4's 12 column grid system, with components designed to look awesome together. It makes use of bold colours, beautiful typography, clear photography and spacious arrangements.

Create awesome, lifelike prototypes with InVision and Now so your users can experience and give feedback on your vision!

To get the PSD and Sketch files, please visit Invision. We used 100 Icons from our friends from Nucleo Icons, check their 20.000 icons here.

React Hooks Support

Now UI Kit PRO React is built on top of Bootstrap 4 using React and Reactstrap, so it fully supports React Hooks.

Bootstrap 4 Support

Now UI Kit PRO React is built on top of the much awaited Bootstrap 4. This makes starting a new project very simple. It also provides benefits if you are already working on a Bootstrap 4 project; you can just import the Now UI Kit style over it.

Sections

Now UI Kit PRO is coming with 34 pre-made sections and practically infinite possibilities to generate more sections using the provided components, their classes and colors. You can view all sections here.

Example Pages

We wanted to fully display the power of this kit, so the kit comes packed with examples showing you how to use the components. Inside the product you will find:

• About us Page
• Blog Post Page
• Blog Posts Page
• Contact us Page
• Ecommerce Page
• Landing Page
• Login Page
• Pricing Page
• Product Page
• Profile Page
• Signup Page

Tutorial & Documentation

In order for you to easily be able to use the Now UI kit, we have created a tutorial page. It shows the structure for the files inside the archive and how to import them. It then features every components with a description and example of how to use it.

Check the full documentation here.

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

Table of Contents

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

Versions

HTML	Angular	Vue	React

Demo

• Start page
• Sections page
• Presentation page
• About us Page
• Blog Post Page
• Blog Posts Page
• Contact us Page
• Ecommerce Page
• Landing Page
• Login Page
• Pricing Page
• Product Page
• Profile Page
• Signup Page

Quick start

Quick start options:

• Buy from Creative Tim

Documentation

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

File Structure

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

now-ui-kit-pro-react
.
├── README.md
├── CHANGELOG.md
├── ISSUE_TEMPLATE.md
├── jsconfig.json
├── package.json
├── public
│   ├── index.html
│   └── manifest.json
└── src
    ├── assets
    │   ├── css
    │   │   ├── bootstrap.min.css
    │   │   ├── bootstrap.min.css.map
    │   │   ├── now-ui-kit.css
    │   │   ├── now-ui-kit.css.map
    │   │   └── now-ui-kit.min.css
    │   ├── demo
    │   │   ├── demo.css
    │   │   ├── nucleo-icons-page-styles.css
    │   │   └── react-demo.css
    │   ├── fonts
    │   ├── img
    │   │   ├── examples
    │   │   ├── flags
    │   │   └── presentation-page
    │   │       └── pages
    │   └── scss
    │       ├── now-ui-kit
    │       │   ├── cards
    │       │   ├── mixins
    │       │   ├── plugins
    │       │   └── sections
    │       ├── now-ui-kit.scss
    │       └── react
    │           ├── now-ui-kit
    │           ├── plugins
    │           └── react-differences.scss
    ├── components
    │   ├── CustomUpload
    │   │   └── ImageUpload.js
    │   ├── Footers
    │   │   ├── Footer.js
    │   │   ├── FooterBlack.js
    │   │   ├── FooterBlackSocial.js
    │   │   ├── FooterDefault.js
    │   │   └── FooterSocial.js
    │   ├── Headers
    │   │   ├── AboutUsHeader.js
    │   │   ├── BlogPostHeader.js
    │   │   ├── BlogPostsHeader.js
    │   │   ├── ContactUsHeader.js
    │   │   ├── EcommerceHeader.js
    │   │   ├── IndexHeader.js
    │   │   ├── LandingPageHeader.js
    │   │   ├── PresentationHeader.js
    │   │   ├── PricingHeader.js
    │   │   ├── ProductPageHeader.js
    │   │   └── ProfilePageHeader.js
    │   └── Navbars
    │       ├── DropdownFixedNavbar.js
    │       ├── DropdownScrollNavbar.js
    │       ├── DropdownWhiteNavbar.js
    │       ├── FixedTransparentNavbar.js
    │       ├── ScrollTransparentNavbar.js
    │       └── WhiteNavbar.js
    ├── index.js
    └── views
        ├── Index.js
        ├── NucleoIcons.js
        ├── Presentation.js
        ├── Sections.js
        ├── examples
        │   ├── AboutUs.js
        │   ├── BlogPost.js
        │   ├── BlogPosts.js
        │   ├── ContactUs.js
        │   ├── Ecommerce.js
        │   ├── LandingPage.js
        │   ├── LoginPage.js
        │   ├── Pricing.js
        │   ├── ProductPage.js
        │   ├── ProfilePage.js
        │   └── SignupPage.js
        ├── index-sections
        │   ├── Basic.js
        │   ├── Cards.js
        │   ├── Carousel.js
        │   ├── ContentAreas.js
        │   ├── FileUploader.js
        │   ├── Footers.js
        │   ├── Images.js
        │   ├── Javascript.js
        │   ├── Navbars.js
        │   ├── Notifications.js
        │   ├── NucleoIcons.js
        │   ├── Pagination.js
        │   ├── Pills.js
        │   ├── PlainCards.js
        │   ├── PreFooter.js
        │   ├── Tabs.js
        │   └── Typography.js
        ├── presentation-sections
        │   ├── BasicComponents.js
        │   ├── Cards.js
        │   ├── Components.js
        │   ├── Content.js
        │   ├── Examples.js
        │   ├── FreeDemo.js
        │   ├── Icons.js
        │   ├── Image.js
        │   ├── Pricing.js
        │   ├── Sections.js
        │   └── Testimonials.js
        └── sections-sections
            ├── Blogs.js
            ├── ContactUs.js
            ├── Features.js
            ├── Headers.js
            ├── Pricing.js
            ├── Projects.js
            ├── Teams.js
            └── Testimonials.js

Browser Support

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

Resources

• Live Preview
• Buy Page: https://www.creative-tim.com/product/now-ui-kit-pro-react?ref=nukp-react-readme
• Documentation is here
• License Agreement: https://www.creative-tim.com/license?ref=nukp-react-readme
• Support: https://www.creative-tim.com/contact-us?ref=nukp-react-readme
• Issues: Github Issues Page
• Now UI Kit React - demo

Dashboards

HTML	Angular	Vue	React

Reporting Issues

We use GitHub Issues as the official bug tracker for the Now UI Kit PRO 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 Kit PRO 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 2023 Creative Tim (https://www.creative-tim.com?ref=nukp-react-readme)
• 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

Instagram: https://instagram.com/creativetimofficial

ct-now-ui-kit-pro-react's Issues

[Bug] Local Images not displaying

Version

1.4.0

Reproduction link

https://codepen.io/rayflores/pen/JjEYQdP

Operating System

Windows 10

Device

Desktop

Browser & Version

Chrome - 89.0.4389.90 (Official Build) (64-bit)

Steps to reproduce

1. npm install
2. npm start
3. http://localhost:3000 - view

What is expected?

images from local src/assets/img/~ should display properly

What is actually happening?

broken images

---

Solution

not sure...

Additional comments

from what I understand, it has something to do with file-loader and url-loader ( esModule: false ) ... but, I do not know how to change that...

[Bug] input select styling docs

Version

1.0.0

Reproduction link

https://demos.creative-tim.com/now-ui-kit-pro-react/#/documentation/forms

Operating System

macOS 10.14.5

Device

MacBook Pro

Browser & Version

Chrome 76.0.3809.100

Steps to reproduce

1. Go to the sizing section ( https://demos.creative-tim.com/now-ui-kit-pro-react/#/documentation/forms )
2. Large, default and small selects are all styled as system default (no difference between them)
3. Also in the "Form row" section, the select is styled as system default.

What is expected?

Styled selects like other form inputs.

What is actually happening?

System default select styling is used.

---

Solution

Update select styling or the docs.

Additional comments

[Bug] Fresh npm install does not work

Version

1.5.0

Reproduction link

Fresh install, nothing to share

Operating System

Ubuntu

Device

mac

Browser & Version

It didn't go that far...

Steps to reproduce

In the documentation it says to extract zip file and run npm install command.
I am running npm install.

What is expected?

Node modules should be installed.

What is actually happening?

npm i
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@"^16.5.0" from [email protected]
npm ERR! node_modules/react-datetime
npm ERR! react-datetime@"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! See /root/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2022-01-07T16_50_02_196Z-debug.log

---

Solution

I don't have any.

Additional comments

I suggest test prod build on a machine that wasn't previously used for development purposes.

[Bug] Build Issue with AWS

Version

latest

Reproduction link

https://master.d1bhhsz8gxg2gx.amplifyapp.com/

Operating System

AWS Amplify

Device

Amplify

Browser & Version

Chrome@latest

Steps to reproduce

-I download product file i make custom configurations for my purpose. When i work with localhost everything is fine.
-I entegrate the project with Aws Amplify, i add authentication and other custom things , again localhost is fine there is no problem with cloud resources.
-Then i want to build the product and deploy to aws i get errors. But when i do exact steps without your product for example when i follow these steps with normal create-react-app application everything is fine.

What is expected?

Build in aws resources and deploy correctly.

What is actually happening?

I can deploy the product to
" https://master.d1bhhsz8gxg2gx.amplifyapp.com/ "
But I get these Errors

And here is my scripts in package.json
"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "compile-sass": "node-sass src/assets/scss/now-ui-dashboard.scss src/assets/css/now-ui-dashboard.css", "minify-sass": "node-sass src/assets/scss/now-ui-dashboard.scss src/assets/css/now-ui-dashboard.min.css --output-style compressed", "map-sass": "node-sass src/assets/scss/now-ui-dashboard.scss src/assets/css/now-ui-dashboard.css --source-map true", "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start" },
Do i have to make any configuration for these scripts ?

Solution

AWS use these template to build projects , maybe we need to make some configuration in the template for your product. Do i need to add additional build commands for your product ?

Thank you all !

[Bug] Can't be built on netlify

Version

1.5.0

Reproduction link

https://github.com/creativetimofficial/ct-now-ui-kit-pro-react/issues

Operating System

N/A

Device

N/A

Browser & Version

N/A

Steps to reproduce

1. upload to github
2. link to netfliy
3. delopy on netlify

What is expected?

Applicable dependeny among all packages

What is actually happening?

npm install failed

---

Solution

Additional comments

For Link to minimal reproduction:
Sorry I should not make a public github project for this.

[Bug] npm install doesn't work

Version

1.5.1

Reproduction link

#5

Operating System

macOS Monterey

Device

12.5

Browser & Version

Chrome latest

Steps to reproduce

Download the latest version of the code from creative-tim website
Install node 16.16.0 Stable version
cd to the downloaded directory
npm install

What is expected?

It should build the website locallay

What is actually happening?

npm install
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.5.0 || ^17.0.0" from [email protected]
npm ERR! node_modules/react-datetime
npm ERR! react-datetime@"3.1.1" 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! See /Users/kalaisel/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/kalaisel/.npm/_logs/2022-08-11T17_11_45_242Z-debug-0.log

---

Solution

Additional comments

I have creative-tim club pass, most of your codebase has dependency issues please resolve this, otherwise it's really difficult for us