Installation

Install Horizon UI by running either of the following:

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

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

Add custom theme (Optional)#

Inside Horizon UI, you can find the ChakraProvider component inside /src/layouts/Admin.js and /src/layouts/Auth.js.

If you need to customize the default chakra theme to match your design requirements, you can extend the theme from @chakra-ui/react.

Chakra UI provides an extendTheme function that deep merges the default theme with your customizations.

// 1. Import the extendTheme function
import { extendTheme } from "@chakra-ui/react"
// 2. Extend the theme to include custom colors, fonts, etc
const colors = {
  brand: {
    900: "#1a365d",
    800: "#153e75",
    700: "#2a69ac",
  },
}
const theme = extendTheme({ colors })
// 3. Pass the `theme` prop to the `ChakraProvider`
function App({ Component }) {
  return (
    <ChakraProvider theme={theme}>
      <Component />
    </ChakraProvider>
  )
}

ChakraProvider Props#

That's it, you're good to go!