horizon-ui / horizon-tailwind-react-nextjs

Horizon UI Tailwind CSS NextJS ❇️ The trendiest & innovative Open Source Admin Dashboard Template for Tailwind CSS, NextJS & React!

Horizon UI Tailwind CSS NextJS ⚡️

 

 

Get started and build your dream web app with Horizon UI Tailwind CSS NextJS, the trendiest & innovative Open Source Admin Template for Tailwind CSS, React & NextJS!

---

Introduction

Designed for those who like modern UI elements and beautiful websites. Made of hundred of elements, designed blocks, and fully coded pages, Horizon UI is ready to help you create stunning websites and web apps.

Save hundreds of hours trying to create and develop a dashboard from scratch. The fastest, most responsive & trendiest dashboard is here. Seriously.

With Horizon UI you will find many examples of pages like NFTs Pages, Authentication Pages, Profile, and so on. Just choose between a Basic Design or a cover and you are good to go!

🎉 [NEW] Horizon UI Components

All the main components from both versions. This will help you to see and interact with all & the latest added components of Horizon (also, new components are on the way, stay tuned)! ⚡️ See all components

Documentation

Each element is well presented in a very complex documentation. You can read more about the documentation here.

Quick Start

Install Horizon UI by running either of the following:

• Install NodeJS LTS from NodeJs Official Page (NOTE: Product only works with LTS version)

• Install Yarn CLI from Yarn Official Page

Clone the repository with the following command:

git clone https://github.com/horizon-ui/horizon-tailwind-react-nextjs.git

Run in terminal this command:

yarn install

Then run this command to start your local server

yarn dev

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

Versions

Free Version	PRO Version

Figma Version

Horizon UI is available in Figma format as well! Check it out on Figma Community! 🎨 See the Horizon UI Figma design files

Reporting Issues

We use GitHub Issues as the official bug tracker for the Horizon UI. 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 Horizon UI Dashbaord. Check the CHANGELOG from your dashboard on our CHANGE LOG File.
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.

---

Community

Connect with the community! Feel free to ask questions, report issues, and meet new people that already use Horizon UI!

💬 Join the #HorizonUI Discord Community!

Copyright and license

⭐️ Copyright 2023 Simmmple

📄 Horizon UI License

horizon-tailwind-react-nextjs's Issues

duplicate key "resolutions" in package.json

You have "resolutions" defined 2 times in package.json

yarn build is broken

I'm using the PRO Version. Running yarn install and yarn build results in multiple errors which leads to a undeployable product.

1. Linting Issues

$ next build
 ⚠ Invalid next.config.js options detected: 
 ⚠     Unrecognized key(s) in object: 'appDir' at "experimental"
 ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config
 ⚠ App router is available by default now, `experimental.appDir` option can be safely removed.
 ✓ Creating an optimized production build    
 ✓ Compiled successfully

Failed to compile.

./src/components/card/CardMenu.tsx
37:7  Error: Do not pass children as props. Instead, nest children between the opening and closing tags.  react/no-children-prop

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Can be hotfixed by excluding ./src/components/card/CardMenu.tsx from the linting process. Real fix is mentioned in the Error message.

2. Naming Issues

$ next build
 ⚠ Invalid next.config.js options detected: 
 ⚠     Unrecognized key(s) in object: 'appDir' at "experimental"
 ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config
 ⚠ App router is available by default now, `experimental.appDir` option can be safely removed.
 ✓ Creating an optimized production build    
 ✓ Compiled successfully
   Linting and checking validity of types  .Failed to compile.

./src/components/admin/dashboards/default/YourCard.tsx:2:24
Type error: Already included file name '/myproject/src/components/card/MasterCard.tsx' differs from file name '/myproject/src/components/card/Mastercard.tsx' only in casing.
  The file is in the program because:
    Imported via "components/card/MasterCard" from file '/myproject/src/components/admin/dashboards/default/YourCard.tsx'
    Imported via 'components/card/MasterCard' from file '/myproject/src/components/admin/main/account/billing/YourCard.tsx'
    Root file specified for compilation

  1 | import Card from "components/card";
> 2 | import MasterCard from "components/card/MasterCard";
    |                        ^
  3 | import Transaction from "components/dataDisplay/Transaction";
  4 | import React from "react";
  5 | import { AiOutlinePlus } from "react-icons/ai";
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Can be fixed by renaming components/card/Mastercard.tsx to components/card/MasterCard.tsx

3. Missing Dependencies

$ next build
 ⚠ Invalid next.config.js options detected: 
 ⚠     Unrecognized key(s) in object: 'appDir' at "experimental"
 ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config
 ⚠ App router is available by default now, `experimental.appDir` option can be safely removed.
 ✓ Creating an optimized production build    
 ✓ Compiled successfully
   Linting and checking validity of types  .Failed to compile.

./src/components/admin/main/profile/settings/Delete.tsx:9:8
Type error: Cannot find module '@chakra-ui/react' or its corresponding type declarations.

   7 |   Text,
   8 |   useColorModeValue,
>  9 | } from '@chakra-ui/react';
     |        ^
  10 | import Card from 'components/card/Card';
  11 | 
  12 | export default function Settings() {
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Can be fixed by running yarn add @chakra-ui/react. Why is chakra part of this repo when we are using Tailwind?

4. Broken References

$ next build
 ⚠ Invalid next.config.js options detected: 
 ⚠     Unrecognized key(s) in object: 'appDir' at "experimental"
 ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config
 ⚠ App router is available by default now, `experimental.appDir` option can be safely removed.
 ✓ Creating an optimized production build    
 ✓ Compiled successfully
   Linting and checking validity of types  .Failed to compile.

./src/components/admin/main/profile/settings/Delete.tsx:10:18
Type error: Cannot find module 'components/card/Card' or its corresponding type declarations.

   8 |   useColorModeValue,
   9 | } from '@chakra-ui/react';
> 10 | import Card from 'components/card/Card';
     |                  ^
  11 | 
  12 | export default function Settings() {
  13 |   // Chakra Color Mode
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Changing import Card from 'components/card/Card'; to 'components/card'; inside ./src/components/admin/main/profile/settings/Delete.tsx fixed the issue because Card component is defined in components/card/index.tsx.

5. ReferenceError: window is not defined

$ next build
 ⚠ Invalid next.config.js options detected: 
 ⚠     Unrecognized key(s) in object: 'appDir' at "experimental"
 ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config
 ⚠ App router is available by default now, `experimental.appDir` option can be safely removed.
 ✓ Creating an optimized production build    
 ✓ Compiled successfully
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
   Generating static pages (0/49)  [    ]ReferenceError: window is not defined
...
 ✓ Generating static pages (49/49) 

> Export encountered errors on following paths:
        /admin/dashboards/car-interface/page: /admin/dashboards/car-interface
        /admin/dashboards/default/page: /admin/dashboards/default
        /admin/dashboards/smart-home/page: /admin/dashboards/smart-home
        /admin/main/account/all-courses/page: /admin/main/account/all-courses
        /admin/main/account/billing/page: /admin/main/account/billing
        /admin/main/applications/calendar/page: /admin/main/applications/calendar
        /admin/main/users/users-reports/page: /admin/main/users/users-reports
        /auth/forgot-password/centered/page: /auth/forgot-password/centered
        /auth/lock/centered/page: /auth/lock/centered
        /auth/sign-in/centered/page: /auth/sign-in/centered
        /auth/sign-up/centered/page: /auth/sign-up/centered
        /auth/verification/centered/page: /auth/verification/centered
        /rtl/dashboards/rtl/page: /rtl/dashboards/rtl

Fixing this seems to be a bigger rewrite.

Rtl can not be activated.

Vercel Deployment Failing with 'NoSSR' cannot be used as a JSX component.

Build command worked successfully in local system .

but during deployment using vercel it is failing with

Failed to compile.
--
10:11:09.075 |  
10:11:09.076 | ./src/app/AppWrappers.tsx:19:11
10:11:09.076 | Type error: 'NoSSR' cannot be used as a JSX component.
10:11:09.076 | Its element type 'ReactElement<any, any> \| Component<{ children: any; }, any, any>' is not a valid JSX element.
10:11:09.076 | Type 'Component<{ children: any; }, any, any>' is not assignable to type 'Element \| ElementClass'.
10:11:09.077 | Type 'Component<{ children: any; }, any, any>' is not assignable to type 'ElementClass'.
10:11:09.077 | The types returned by 'render()' are incompatible between these types.
10:11:09.077 | Type 'React.ReactNode' is not assignable to type 'import("/vercel/path0/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.
10:11:09.077 | Type 'ReactElement<any, string \| JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
10:11:09.077 | Property 'children' is missing in type 'ReactElement<any, string \| JSXElementConstructor<any>>' but required in type 'ReactPortal'.

yarn dev error

Anyone having the same issue?

[email protected] dev
next dev

⚠ Port 3000 is in use, trying 3001 instead.
⚠ Invalid next.config.js options detected:
⚠ Unrecognized key(s) in object: 'appDir' at "experimental"
⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config
⚠ App router is available by default now, experimental.appDir option can be safely removed.
warning package.json: "dependencies" has dependency "@types/node" with range "^12.20.55" that collides with a dependency in "devDependencies" of the same name with version "^18.7.6"
warning package.json: "dependencies" has dependency "@types/react" with range "^18.0.15" that collides with a dependency in "devDependencies" of the same name with version "18.2.0"
warning package.json: "dependencies" has dependency "@types/react-dom" with range "^18.0.6" that collides with a dependency in "devDependencies" of the same name with version "^18.2.1"
(node:93919) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use node --trace-warnings ... to show where the warning was created)
▲ Next.js 13.5.5

• Local: http://localhost:3001
• Experiments (use at your own risk):
  · appDir

✓ Ready in 2.5s
✓ Compiled /page in 2.5s (511 modules)
⨯ TypeError: e.getSetCookie is not a function
at Home (./src/app/page.tsx:9:62)
at stringify ()
✓ Compiled in 241ms (259 modules)