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#

NameTypeDefaultDescription
resetCSSbooleantrueautomatically includes <CSSReset />
themeTheme@chakra-ui/themeoptional custom theme
colorModeManagerStorageManagerlocalStorageManagermanager to persist a users color mode preference in
portalZIndexnumberundefinedcommon z-index to use for Portal

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

Horizon UI © 2021-2023 Copyright. All Rights Reserved.

  • Blog
  • License