Giter VIP home page Giter VIP logo

notus-react's Introduction

Notus React Tweet

version license GitHub issues open GitHub issues closed Join the chat at https://gitter.im/NIT-dgp/General Chat

Notus React

A beautiful UI Kit and Admin for Tailwind CSS and React.

Start your development with a Free Tailwind CSS and React UI Kit and Admin. Let Notus React amaze you with its cool features and build tools and get your project to a whole new level.

Notus React is Free and Open Source. It features multiple HTML and React elements and it comes with dynamic components for React.

It is based on Tailwind Starter Kit by Creative Tim, and it is build with both presentation pages, and pages for an admin dashboard.

Speed up your web development with a beautiful product made by Creative Tim . If you like bright and fresh colors, you will love this Free Tailwind CSS Template! It features a huge number of components that can help you create amazing websites.

Get Started

  • Install NodeJS LTS version from NodeJs Official Page
  • Download the product on this page
  • Unzip the downloaded file to a folder in your computer
  • Open Terminal
  • Go to your file project (where you’ve unzipped the product)
  • (If you are on a linux based terminal) Simply run npm run install:clean
  • (If not) Run in terminal npm install
  • (If not) Run in terminal npm run build:tailwind (each time you add a new class, a class that does not exist in src/assets/styles/tailwind.css, you will need to run this command)
  • (If not) Run in terminal npm start
  • Navigate to https://localhost:3000
  • Check more about Tailwind CSS

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. You will be able to quickly set up the basic structure for your web project.

Here are all the page from the project:

Fully Coded Components

Notus React is built with over frontend 120 components, giving you the freedom of choosing and combining. All components can take variations in colors, that you can easily modify using Tailwind CSS classes (NOTE: each time you add a new class, a class that does not exist in src/assets/styles/tailwind.css, you will need to compile again tailwind).

You will save a lot of time going from prototyping to full-functional code, because all elements are implemented. This Free Tailwind CSS Template is coming with prebuilt examples, so the development process is seamless, switching from our pages to the real website is very easy to be done.

Every element has multiple states for colors, styles, hover, focus, that you can easily access and use.

CSS Components

Notus React comes with 120 Fully Coded CSS elements, such as Alerts, Buttons, Inputs and many more.

Please check all of them here.

React Components

We also feature the following 18 dynamic components:

Table of Contents

Versions

Angular JavaScript / HTML NextJS React Svelte VueJS
Notus Angular Notus JS Notus NextJS Notus React Notus Svelte Vue Notus

Documentation

The documentation for the Notus React is hosted at our website.

Quick start

Files and Folder

This is the project structure that you will get upon the download:

notus-react
.
├── CHANGELOG.md
├── ISSUE_TEMPLATE.md
├── LICENSE.md
├── README.md
├── gulpfile.js
├── jsconfig.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── assets
│   │   ├── img
│   │   │   ├── github.svg
│   │   │   └── google.svg
│   │   └── styles
│   │       ├── index.css
│   │       └── tailwind.css
│   ├── components
│   │   ├── Cards
│   │   │   ├── CardBarChart.js
│   │   │   ├── CardLineChart.js
│   │   │   ├── CardPageVisits.js
│   │   │   ├── CardProfile.js
│   │   │   ├── CardSettings.js
│   │   │   ├── CardSocialTraffic.js
│   │   │   ├── CardStats.js
│   │   │   └── CardTable.js
│   │   ├── Dropdowns
│   │   │   ├── IndexDropdown.js
│   │   │   ├── NotificationDropdown.js
│   │   │   ├── PagesDropdown.js
│   │   │   ├── TableDropdown.js
│   │   │   └── UserDropdown.js
│   │   ├── Footers
│   │   │   ├── Footer.js
│   │   │   ├── FooterAdmin.js
│   │   │   └── FooterSmall.js
│   │   ├── Headers
│   │   │   └── HeaderStats.js
│   │   ├── Maps
│   │   │   └── MapExample.js
│   │   ├── Navbars
│   │   │   ├── AdminNavbar.js
│   │   │   ├── AuthNavbar.js
│   │   │   └── IndexNavbar.js
│   │   └── Sidebar
│   │       └── Sidebar.js
│   ├── index.js
│   ├── layouts
│   │   ├── Admin.js
│   │   └── Auth.js
│   └── views
│       ├── Index.js
│       ├── Landing.js
│       ├── Profile.js
│       ├── admin
│       │   ├── Dashboard.js
│       │   ├── Maps.js
│       │   ├── Settings.js
│       │   └── Tables.js
│       └── auth
│           ├── Login.js
│           └── Register.js
└── tailwind.config.js

Browser Support

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

Chrome Firefox Edge Safari Opera

Reporting Issues

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

Licensing

Useful Links

Social Media

Twitter: https://twitter.com/CreativeTim

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

Dribbble: https://dribbble.com/creativetim

Instagram: https://www.instagram.com/creativetimofficial/

Resources

notus-react's People

Contributors

einazare avatar marqbeniamin 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

notus-react's Issues

[Feature Request] Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in /var/www/html/my_proyect/public_html/notus-react-main/node_modules/postcss/package.json

What is your enhancement?

I'm trying to build, but this error appears [email protected] build

react-scripts build && gulp licenses

node:internal/modules/cjs/loader:571
throw e;
^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in /var/www/html/lnavarroa.cl/public_html/notus-react-main/node_modules/postcss/package.json
at new NodeError (node:internal/errors:399:5)
at exportsNotFound (node:internal/modules/esm/resolve:361:10)
at packageExportsResolve (node:internal/modules/esm/resolve:697:9)
at resolveExports (node:internal/modules/cjs/loader:565:36)
at Module._findPath (node:internal/modules/cjs/loader:634:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:1061:27)
at Module._load (node:internal/modules/cjs/loader:920:27)
at Module.require (node:internal/modules/cjs/loader:1141:19)
at require (node:internal/modules/cjs/helpers:110:18)
at Object. (/var/www/html/lnavarroa.cl/public_html/notus-react-main/node_modules/postcss-safe-parser/lib/safe-parser.js:1:17) {
code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

Node.js v18.15.0

digital envelope routines::unsupported

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:68:19)
at Object.createHash (node:crypto:138:10)
at module.exports (C:\Users\prana\Desktop\main-file\Admin\dashboard\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\prana\Desktop\main-file\Admin\dashboard\node_modules\webpack\lib\NormalModule.js:417:16)
at handleParseError (C:\Users\prana\Desktop\main-file\Admin\dashboard\node_modules\webpack\lib\NormalModule.js:471:10)
at C:\Users\prana\Desktop\main-file\Admin\dashboard\node_modules\webpack\lib\NormalModule.js:503:5
at C:\Users\prana\Desktop\main-file\Admin\dashboard\node_modules\webpack\lib\NormalModule.js:358:12
at C:\Users\prana\Desktop\main-file\Admin\dashboard\node_modules\loader-runner\lib\LoaderRunner.js:373:3 at iterateNormalLoaders (C:\Users\prana\Desktop\main-file\Admin\dashboard\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at iterateNormalLoaders (C:\Users\prana\Desktop\main-file\Admin\dashboard\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
C:\Users\prana\Desktop\main-file\Admin\dashboard\node_modules\react-scripts\scripts\start.js:19
throw err;
^

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:68:19)
at Object.createHash (node:crypto:138:10)
at module.exports (C:\Users\prana\Desktop\main-file\Admin\dashboard\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\prana\Desktop\main-file\Admin\dashboard\node_modules\webpack\lib\NormalModule.js:417:16)
at C:\Users\prana\Desktop\main-file\Admin\dashboard\node_modules\webpack\lib\NormalModule.js:452:10
at C:\Users\prana\Desktop\main-file\Admin\dashboard\node_modules\webpack\lib\NormalModule.js:323:13
at C:\Users\prana\Desktop\main-file\Admin\dashboard\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\Users\prana\Desktop\main-file\Admin\dashboard\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\Users\prana\Desktop\main-file\Admin\dashboard\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at C:\Users\prana\Desktop\main-file\Admin\dashboard\node_modules\babel-loader\lib\index.js:59:103 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

[Feature Request] Tailwind v3 Support?

What is your enhancement?

Hi there,

My company is evaluating a number of paid Tailwind/ React libraries. Are there any plans to update the full library to tailwind v3?

Please Help ME

I use modal. But, when i am implement in my app, it's auto close when i click form input.

[Bug] Images and Designs are not visible

Version

1.1.0

Reproduction link

https://codepen.io/Patricia-Collins/pen/bGQoWoj

Operating System

Win 10

Device

Asus

Browser & Version

Chrome Version 114

Steps to reproduce

I just shared the package.json since that's the only thing different from your code, if you can check what's wrong with that

What is expected?

Images to be uploaded and designs

What is actually happening?

Images and designs not showing up


Solution

Additional comments

My work network won't let me upload anything without blocking the site I'm sorry I can just provide the package.json file plus I'm using node 19.8.1

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in /var/www/html/my_proyec_path/public_html/notus-react-main/node_modules/postcss/package.json

hi, i have this problem with npm run build, npm start, npm run build:tailwind. I have try delete node_modules

`[email protected] build

react-scripts build && gulp licenses

node:internal/modules/cjs/loader:571
throw e;
^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in /var/www/html/my_proyect_path/public_html/notus-react-main/node_modules/postcss/package.json
at new NodeError (node:internal/errors:399:5)
at exportsNotFound (node:internal/modules/esm/resolve:361:10)
at packageExportsResolve (node:internal/modules/esm/resolve:697:9)
at resolveExports (node:internal/modules/cjs/loader:565:36)
at Module._findPath (node:internal/modules/cjs/loader:634:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:1061:27)
at Module._load (node:internal/modules/cjs/loader:920:27)
at Module.require (node:internal/modules/cjs/loader:1141:19)
at require (node:internal/modules/cjs/helpers:110:18)
at Object. (/var/www/html/my_proyect_path/public_html/notus-react-main/node_modules/postcss-safe-parser/lib/safe-parser.js:1:17) {
code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

Node.js v18.15.0`

[Bug] missing default configs in tailwind.css file

Version

latest

Reproduction link

https://codepen.io/

Operating System

windows 10

Device

pc

Browser & Version

latest

Steps to reproduce

  1. look for grid-cols-4 in tailwind.css

What is expected?

all the default options that appear in the documentation would be built into the tailwind.css

What is actually happening?

not sure if it's really a bug - but it seems that some of the CSS definitions are missing comparing to the official tailwind documentation.

for example see https://tailwindcss.com/docs/grid-template-columns#class-reference,
grid-cols-3 to 10 are missing from tailwind.css, but it's also at colors like bg-lightBlue-100 etc.


Solution

i tried to rebuild the tailwind.css via tailwind build src/assets/styles/index.css -o src/assets/styles/tailwind.css with no sucesuss,
this is the configurations:

Additional comments

`

const plugin = require("tailwindcss/plugin");
const colors = require("tailwindcss/colors");

module.exports = {
purge: {
enabled: true,
content: [
"./public//.html",
"./public/
.html",
"./src/
/.js",
"./src/
.js",
"./src//.html",
"./src/
.html",
"./public/
/.js",
"./public/
.js",
],
options: {
safelist: [],
},
},
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
...colors,
},
extend: {
minHeight: {
"screen-75": "75vh",
},
fontSize: {
55: "55rem",
},
opacity: {
80: ".8",
},
zIndex: {
2: 2,
3: 3,
},
inset: {
"-100": "-100%",
"-225-px": "-225px",
"-160-px": "-160px",
"-150-px": "-150px",
"-94-px": "-94px",
"-50-px": "-50px",
"-29-px": "-29px",
"-20-px": "-20px",
"25-px": "25px",
"40-px": "40px",
"95-px": "95px",
"145-px": "145px",
"195-px": "195px",
"210-px": "210px",
"260-px": "260px",
},
height: {
"95-px": "95px",
"70-px": "70px",
"350-px": "350px",
"500-px": "500px",
"600-px": "600px",
},
maxHeight: {
"860-px": "860px",
},
maxWidth: {
"100-px": "100px",
"120-px": "120px",
"150-px": "150px",
"180-px": "180px",
"200-px": "200px",
"210-px": "210px",
"580-px": "580px",
},
minWidth: {
"140-px": "140px",
48: "12rem",
},
backgroundSize: {
full: "100%",
},
},
},
variants: [
"responsive",
"group-hover",
"focus-within",
"first",
"last",
"odd",
"even",
"hover",
"focus",
"active",
"visited",
"disabled",
],
plugins: [
require("@tailwindcss/forms"),
plugin(function ({ addComponents, theme }) {
const screens = theme("screens", {});
addComponents([
{
".container": { width: "100%" },
},
{
[@media (min-width: ${screens.sm})]: {
".container": {
"max-width": "640px",
},
},
},
{
[@media (min-width: ${screens.md})]: {
".container": {
"max-width": "768px",
},
},
},
{
[@media (min-width: ${screens.lg})]: {
".container": {
"max-width": "1024px",
},
},
},
{
[@media (min-width: ${screens.xl})]: {
".container": {
"max-width": "1280px",
},
},
},
{
[@media (min-width: ${screens["2xl"]})]: {
".container": {
"max-width": "1280px",
},
},
},
]);
}),
]
`

[Feature Request] Typescript support?

What is your enhancement?

Hi. I'm considering to use this template in my project. But it's created with TypeScript + React.
Do you have any plan to add type definitions (.d.ts) to this product soon?

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.