HyperTheme: powerful visual theme editor for Chakra UI + ReactJS
Tags: react, webdev, chakraui, javascript
Published: 2021-07-21 09:33:55

###Intro to Chakra UI
Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
[Chakra UI Offical website](https://chakra-ui.com/)

###HyperTheme Editor for Chakra UI
Powerful visual theme editor for your next Chakra UI project.
We created a tool that helps designers, developers, and companies design beautiful themes in minutes. 
With the HyperTheme Editor you can customise a theme live on your project and export the result, all this in a few clicks 🔥

🔗Try it now: [hyperthe.me](hyperthe.me)


####With HyperTheme Pro you can edit:
🎨Colors

🔤Font Sizes

🔤Fonts

🔤 Line Heights

🔤Letter Spacing

🟣Radius

🔲Shadows

↔️ Spacing


####Extra features

🎨Palette Generator 

📗Google Fonts integration

⏪Undo/Redo

📦Unlimited exports (Typescript or Javascript)

🔄Free updates


#### Coming soon features:

📚Multiple Themes

☁️Save theme in cloud

🏠Save theme directly in your project

🔥Material UI theme editor


###Installation (Free Version):


####1)Install with NPM:
```
npm i @hypertheme-editor/chakra-ui
```

or if you use Yarn:
```
yarn add @hypertheme-editor/chakra-ui

```
####2)Configure ThemeEditorProvider
Add the `<ThemeEditorProvider />` component just below your `<ChakraProvider />`, like in this example for NextJS:
```
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
import theme from '../my-theme'
import { ThemeEditorProvider } from "@hypertheme-editor/chakra-ui"

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

export default App
```

####3)Add the ThemeEditorDrawerButton

Add the `<ThemeEditorDrawerButton />` where you need it, the component provides ChakraUI ButtonProps, so you can place it where you prefer and change the button behaviour:

```
import * as React from 'react'
import { Box } from '@chakra-ui/react'
import { ThemeEditorDrawerButton } from '@hypertheme-editor/chakra-ui'

function Layout() {
  return (
    <Box>
      ...rest of layout
      <ThemeEditorDrawerButton pos="fixed" bottom={4} right={2} />
    </Box>
  )
}

export default Layout
```


####Enjoy
You now have a theme editor for your ChakraUI projects. Click the Export button to obtain a droppable theme in js or ts format in a ZIP.


###Installation (Pro Version):

####1. Obtain a license key
Hypertheme Editor PRO is hosted on a private NPM registry accessible with a license.
Don't have a license key? (Get PRO license)
[Get you license](https://hyperting.gumroad.com/l/hypertheme-editor)


####2. Configure your project
Create a .npmrc file in the root folder of your project with the below content:

```
@hypertheme-editor-pro:registry=https://npm.hyperthe.me
registry=https://registry.npmjs.com
```

####3. Login to Hypertheme Editor PRO NPM
To login in the private registry you have to run npm run login, when asked use hypertheme as the Username and your license key as the Password:

```
$ npm login --registry=https://npm.hyperthe.me

Username: hypertheme
Password: <YOUR_LICENSE_KEY>
Email: (this IS public) <YOUR_EMAIL>

Logged in as hypertheme on https://npm.hyperthe.me/.

```

####4. Install it
Install with NPM:
```
npm i @hypertheme-editor-pro/chakra-ui
```
Or with yarn:
```
yarn add @hypertheme-editor-pro/chakra-ui
```

####5. Set up
Installation is super easy and fast:
- Add the component `<ThemeEditorProvider />`just below the <ChakraProvider /> component.
- Add the component `<ThemeEditorDrawerButton />`.

Here's an example:
```
import * as React from "react"
import { ChakraProvider } from "@chakra-ui/react"
import { ThemeEditorProvider, ThemeEditorDrawerButton } from '@hypertheme-editor-pro/chakra-ui'
import theme from './my-theme'

function App() {
  return (
    <ChakraProvider theme={theme}>
      <ThemeEditorProvider>
        <ThemeEditorDrawerButton pos="fixed" bottom={4} right={2} />
      </ThemeEditorProvider>
    </ChakraProvider>
  )
}
```

####6.Enjoy

You now have an inline editor in your project.

####Credits
Designed with 💖 by  
[Hyperting](Hyperting.com)