Installation - Horizon AI Template

How to install and set up Horizon AI Template:

Installation - Free version#


Horizon AI Template


Install Horizon AI Template running 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

Run in terminal this command:

npm install

Then run this command to start your local server

npm run dev

Installation - PRO Version#

Horizon AI Template PRO comes with over 100+ individual components, like buttons, inputs, prompt templates, cards, or alerts, giving you the freedom of choosing and combining, more than 26+ ready-to-use fully-coded example pages, and many more premium features!

The PRO Version of Horizon is coming with prebuilt design blocks, so the development process is seamless, switching from our pages to the real app is very easy to be done.

Upgrade to PRO


Horizon AI Template PRO


Install Horizon AI Template PRO following then next steps:

Open in your code editor the archive you got after you
purchased Horizon AI Template PRO.

Run in terminal this command:

npm install

Then run this command to start your local server

npm run dev

Add custom theme (Optional)#

Inside Horizon AI Template, you can find the ChakraProvider component inside /page/_app.tsx.

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 Props#

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 AI Template © 2021-2023 Copyright. All Rights Reserved.

  • Blog
  • License