Getting Started Community

Do you have a PRO or Extended license?

Click hereto see the instruction to install HyperTheme Editor PRO.

Installation

Inside your Chakra UI project directory, install @hypertheme-editor/chakra-ui with NPM:

npm i @hypertheme-editor/chakra-ui

or with Yarn:

yarn add @hypertheme-editor/chakra-ui

Setup Provider

HyperTheme Editor needs the ThemeEditorProvider in order to work and live edit the current Chakra UI theme.

At the root of your application add the ThemeEditorProvider just below the ChakraProvider component like in this example:

import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
// 1. import `ThemeEditorProvider` component
import { ThemeEditorProvider } from '@hypertheme-editor/chakra-ui'
import theme from './my-theme'

function App() {
  // 2. Add the `ThemeEditorProvider` component just below the `ChakraProvider` components
  return (
    <ChakraProvider theme={theme}>
      <ThemeEditorProvider>
        <Component />
      </ThemeEditorProvider>
    </ChakraProvider>
  )
}

Add the default ThemeEditor

HyperTheme Editor comes with a plug&play HyperThemeEditor component that gives you immediately all the features ready to be used.

The HyperThemeEditor renders a Chakra UI Button and accepts all the ButtonProps, so you can add it wherever you want.

In this example we're adding the ThemeEditor in a Layout rendered by all pages of our application:

import * as React from 'react'
import { Container } from '@chakra-ui/react'
import { HyperThemeEditor } from '@hypertheme-editor/chakra-ui'

function Layout({ children }) {
  return (
    <Container maxW="container.lg">
      <HyperThemeEditor pos="absolute" top={2} right={2} />
      {children}
    </Container>
  )
}

Now you have HyperTheme setup and running.

Install Sora Font Family (Optional)

HyperTheme interface uses Sora font-family as his default font.

You can install it and import it at the root level of your application.

To install, go into your project root and run:

npm i @fontsource/sora

or if you use Yarn:

yarn add @fontsource/sora

Now, you can add it at the root of your application, like in the example below:

import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
import { ThemeEditorProvider } from '@hypertheme-editor/chakra-ui'
import theme from './my-theme'

// import Sora font-family
import '@fontsource/sora/200.css'
import '@fontsource/sora/400.css'
import '@fontsource/sora/600.css'
import '@fontsource/sora/800.css'

function App() {
  return (
    <ChakraProvider theme={theme}>
      <ThemeEditorProvider>
        <Component />
      </ThemeEditorProvider>
    </ChakraProvider>
  )
}

Next steps

HyperTheme Editor is highly customizable, , check the rest of the documentation to learn how to create custom theme editors.

Hyper kit

Made with ❤️ in 🇮🇹 | byHyperting

Getting Started

Guides

Components