HyperTheme

Editor v0.1.2

PricingDocsChangelog

Try it

Getting Started

InstallationPro InstallationPROUpgrade to v0.1

Guides

Create a Custom Editor Panel

Components

ThemeEditorProviderHyperThemeEditorThemeEditorThemeEditorDrawerThemeEditorDrawerHeaderThemeEditorDrawerFooterThemeEditorRootPanelThemeEditorButtonColorModeToggleThemeIcon

Hooks

useThemeEditor

Editors

ColorsFont SizesTypography PROFonts PROLine Heights PROLetter Spacing PROShadows PRORadii PROSpace PRO

Getting Started Community

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

Table of content

  • Installation
  • Setup Provider
  • Add the default ThemeEditor
  • Install Sora Font Family (Optional)
  • Next steps