Giter VIP home page Giter VIP logo

horizon-ui / horizon-ui-chakra Goto Github PK

View Code? Open in Web Editor NEW
2.3K 14.0 456.0 14.73 MB

Horizon UI JavaScript ⭐️ The trendiest & innovative Open Source Admin Template for Chakra UI & React!

Home Page: https://horizon-ui.com/horizon-ui-chakra/

License: MIT License

HTML 0.54% CSS 1.52% JavaScript 97.94%
admin template admin-ui dashboard admin-dashboard admin-panel admin-template chakra-ui chakra-ui-react dashboard-template

horizon-ui-chakra's Introduction

version license GitHub issues open

 

Horizon UI

 

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


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 webapps.

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 for 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:

Clone the repository with the following command:

git clone https://github.com/horizon-ui/horizon-ui-chakra.git

Run in terminal this command:

npm install

Then run this command to start your local server

npm start

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
Horizon UI Horizon UI PRO

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-ui-chakra's People

Contributors

it-nalon avatar mariomurrent-softwaresolutions avatar simmmpleweb 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  avatar  avatar

horizon-ui-chakra's Issues

Runtime WARNINGs in latest version - yarn Start

The latest version runs with warnings / errors during the yarn start command.

Environment

  • Node v17.0.0
  • Yarn 1.22.18

Full Log

WARNING in ./node_modules/stylis-plugin-rtl/dist/stylis-rtl.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\work\repo-kits\simmple-react-horizon\node_modules\stylis-plugin-rtl\src\stylis-rtl.ts' file: Error: ENOENT: no such file or directory, open 'D:\work\repo-kits\simmple-react-horizon\node_modules\stylis-plugin-rtl\src\stylis-rtl.ts'
 @ ./src/components/rtlProvider/RtlProvider.js 8:0-36 14:20-23
 @ ./src/layouts/rtl/index.js 12:0-68 139:30-41
 @ ./src/index.js 10:0-36 35:21-30

1 warning has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

Set Dark Them by default

Hey everyone,
I like your template horizon-ui-pro.
I need to set by default dark them (and also remove this feature to only get dark them).
But I'm stuck. Could you help me?

remove # from route

image

how do I remove the # from the route (like displayed in above image) such that it's http://localhost:3000/auth/default

horizon UI header section content getting overlapped

The issue
In the screenshot you can see that the horizon UI header has admin template being overlapped over components.

The system configurations :
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

The screenshot:
Screenshot 2023-10-26 100018

building and serving dashboard

yarn build
This created the per usual React App optimized for the deployment.
But on serving it, it was blank and rendered nothing:
image

And nowhere in your docs is build instruction explained. What do we do?

OS: Ubuntu 22

Conditionally Hide Routes in Sidebar

User Story
As a developer,
I want to have a hidden prop in routes.js
So that I can create routes respected by react-router, but not shown in Sidebar.js

Description
A hidden prop can be added in routes.js that would still be loaded into the react-router, but not rendered in the Sidenav.
This will allow devs to not have to manually create custom router logic for their nested routes.

See PR:
https://github.com/horizon-ui/horizon-ui-chakra/pull/22/files?diff=split&w=1 (whitespace removed for readability)

Chakra UI Toasts doesn't work.

Hello, i've tried using toasts from chakra ui on this template but for some reason, even on a simple test like


 <Button
      onClick={() =>
        toast({
          title: 'Account created.',
          description: "We've created your account for you.",
          status: 'success',
          duration: 9000,
          isClosable: true,
        })
      }
    >
      Show Toast
    </Button>

I get this error when i click the button
:
image

Unable to get routing to work

Hi there,
I just installed this template and started to implement routing according to my needs. But I was unable to figure what would be the correct way to allow only singed in user to access certain routes without modifying much of preset routing mechanism.

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.